it-swarm-ru.tech

JavaScript для прокрутки длинной страницы в DIV

У меня есть ссылка на длинной странице HTML. Когда я нажимаю на нее, я хочу, чтобы div в другой части страницы был виден в окне при прокрутке в окне просмотра.

Немного похоже на EnsureVisible на других языках.

Я проверил scrollTop и scrollTo, но они кажутся красными сельдями.

Кто-нибудь может помочь?

95
Angus McCoteup

старый вопрос, но если кто-нибудь найдет это через гугл (как я) и кто не хочет использовать якоря или jquery; есть встроенная функция javascript для "перехода" к элементу;

document.getElementById('youridhere').scrollIntoView();

и что еще лучше; согласно великолепным таблицам совместимости в quirksmode, это поддерживается всеми основными браузерами !

367
futtta

Если вы не хотите добавлять дополнительное расширение, следующий код должен работать с jQuery.

$('a[href=#target]').
    click(function(){
        var target = $('a[name=target]');
        if (target.length)
        {
            var top = target.offset().top;
            $('html,body').animate({scrollTop: top}, 1000);
            return false;
        }
    });
23
Josh
22
George Mauer
<a href="#myAnchorALongWayDownThePage">Click here to scroll</a>

<A name='myAnchorALongWayDownThePage"></a>

Никакой причудливой прокрутки, но она должна вас там перенести.

15
mjallday

Сложность с прокруткой заключается в том, что вам может понадобиться не только прокрутить страницу, чтобы показать элемент div, но вам также может понадобиться прокрутить прокручиваемые элементы div на любом количестве уровней.

Свойство scrollTop доступно для любого элемента DOM, включая тело документа. Установив его, вы можете контролировать, как далеко вниз прокручивается что-то. Вы также можете использовать свойства clientHeight и scrollHeight, чтобы увидеть, сколько прокрутки необходимо (прокрутка возможна, когда clientHeight (viewport) меньше, чем scrollHeight (высота содержимого).

Вы также можете использовать свойство offsetTop, чтобы выяснить, где в контейнере расположен элемент.

Чтобы создать по-настоящему универсальную процедуру "прокрутки в поле зрения" с нуля, вам нужно начать с узла, который вы хотите показать, убедиться, что он находится в видимой части его родителя, затем повторить то же самое для родителя и т.д., Все путь, пока вы не достигнете вершины.

Один шаг этого будет выглядеть примерно так (непроверенный код, без проверки пограничных случаев):

function scrollIntoView(node) {
  var parent = node.parent;
  var parentCHeight = parent.clientHeight;
  var parentSHeight = parent.scrollHeight;
  if (parentSHeight > parentCHeight) {
    var nodeHeight = node.clientHeight;
    var nodeOffset = node.offsetTop;
    var scrollOffset = nodeOffset + (nodeHeight / 2) - (parentCHeight / 2);
    parent.scrollTop = scrollOffset;
  }
  if (parent.parent) {
    scrollIntoView(parent);
  }
}
8
levik

Это сработало для меня

document.getElementById('divElem').scrollIntoView();
6
Xcoder

Ответ опубликован здесь - это же решение вашей проблемы.

Правка: ответ JQuery очень хорошо, если вы хотите плавную прокрутку - я не видел этого в действии раньше.

5
Chuck

Почему не именованный якорь?

4
Bloodhound

Свойство, которое вам нужно, это location.hash. Например:

location.hash = 'top'; // прыгнул бы к названному якору "top

Я не знаю, как сделать анимацию прокрутки Nice без использования dojo или какого-либо подобного инструментария, но если вам просто нужно, чтобы перейти на якорь, location.hash должен это сделать.

(протестировано на FF3 и Safari 3.1.2)

4
Scott Swezey

Вы можете использовать метод Element.scrollIntoView(), как было упомянуто выше. Если вы оставите его без параметров внутри, у вас будет мгновенная уродливая прокрутка . Для предотвращения этого вы можете добавить этот параметр - behavior:"smooth".

Пример:

document.getElementById('scroll-here-plz').scrollIntoView({behavior: "smooth", block: "start", inline: "nearest"});

Просто замените scroll-here-plz вашим div или элементом на веб-сайте. И если вы видите свой элемент в нижней части окна или позиция не соответствует ожидаемой, поиграйте с параметром block: "". Вы можете использовать block: "start", block: "end" или block: "center".

Помните: всегда используйте параметры внутри объекта {}.

Если у вас все еще будут проблемы, перейдите по адресу https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Для этого метода есть подробная документация.

4
Smelino

Я не могу добавить комментарий к ответу futtta выше, но для более плавного использования прокрутки:

onClick="document.getElementById('more').scrollIntoView({block: 'start', behavior: 'smooth'});"
3
funnyfish

Для плавной прокрутки этот код полезен

$('a[href*=#scrollToDivId]').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      var head_height = $('.header').outerHeight(); // if page has any sticky header get the header height else use 0 here
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top - head_height
        }, 1000);
        return false;
      }
    }
  });
0
Swarnendu Paul

Я лично нашел ответ Джоша на основе jQuery выше, который я видел лучше всего, и отлично работал для моего приложения ... конечно, я уже использовал jQuery ... Я, конечно, не включил бы вся библиотека JQ только для этой цели.

Ура!

Правка: ОК ... так, через несколько секунд после публикации, я увидел другой ответ только ниже мой (не уверен, если все еще ниже меня после редактирования), который сказал использовать:

document.getElementById ( 'your_element_ID_here') scrollIntoView ().

Это работает отлично и в гораздо меньшем количестве кода, чем версия jQuery! Я понятия не имел, что в JS была встроенная функция с именем .scrollIntoView (), но она есть! Так что, если вы хотите модную анимацию, переходите на jQuery. Быстро и грязно ... используйте это!

0
Lelando

Существует плагин jQuery для общего случая прокрутки до элемента DOM, но если производительность является проблемой (и когда это не так?), Я бы предложил сделать это вручную. Это включает в себя два этапа:

  1. Поиск позиции элемента, на который вы прокручиваете.
  2. Прокрутка до этой позиции.

quirksmode дает хорошее объяснение механизма позади первого. Вот мое предпочтительное решение:

function absoluteOffset(elem) {
    return elem.offsetParent && elem.offsetTop + absoluteOffset(elem.offsetParent);
}

Он использует приведение от нуля к 0, что не является правильным Этикетом в некоторых кругах, но мне нравится :) Вторая часть использует window.scroll. Итак, остальное решение:

function scrollToElement(elem) {
    window.scroll(absoluteOffset(elem));
}

Вуаля!

0
Andrey Fedorov

scrollTop (IIRC) - это место, где в документе прокручивается верхняя часть страницы. scrollTo прокручивает страницу так, чтобы верхняя часть страницы была там, где вы указали.

Что вам нужно здесь, так это некоторые стили, управляемые Javascript. Скажем, если вы хотите, чтобы div находился за пределами экрана, и прокрутите его справа, вы должны установить левый атрибут div в ширину страницы, а затем уменьшать его на определенную величину каждые несколько секунд, пока не достигнете желаемого значения.

Это должно указать вам в правильном направлении.

Дополнительно: извините, я подумал, что вы хотите, чтобы отдельный div "выскочил" откуда-то (вроде как этот сайт иногда делает), а не перемещал всю страницу в раздел. Правильное использование якорей позволит достичь этого эффекта.

0
Benjamin Autin