Выделите элемент HTML с определенным идентификатором в JavaScript или JQuery

Question

У меня есть элементы HTML с назначенным идентификатором. Теперь я хочу прокрутить до этих элементов. Я вижу, что в jQuery есть scrollTop, который принимает целочисленное значение. Как мне просто сделать конкретный HTML-элемент с прокруткой идентификатора вверх? В идеале, с приятной и плавной анимацией.

Быстрый поиск показал множество прокручиваемых плагинов ... если плагин нужен для вышеуказанной функциональности, какой из них наиболее популярен? Я также использую jquery-ui.

Answer 1

Вы можете использовать что-то вроде этого для прокрутки до #someElement при загрузке страницы:

$(document).ready(function() {
    $("html, body").animate({scrollTop: $("#someElement").offset().top}, 1000); 
});

Он просто анимирует свойство scrollTop элемента body и использует верхнее смещение:какой-то конкретный элемент в качестве позиции для прокрутки.Анимация длится 1000 мс.

Примечание: она выбирает html и body, поэтому она работает в разных браузерах.Я не уверен в деталях, но некоторые быстрые тесты показывают, что Chrome использует body, но Firefox и IE используют html.

Вот рабочий пример .

Answer 2

Рассмотрим следующий фрагмент:

$('#myDiv').bind('click',function(){

    var pos = $(this).offset().top,
    scrollSpeed = 2;

    for (var i = pos; i > 0; i=i-scrollSpeed) {
        $(window).scrollTop(i);
    }
}); 

Например, прокрутка была привязана к элементу #myDiv при нажатии. Код определяет положение элемента #myDiv, а затем вычисляет количество шагов прокрутки (скорость / плавность). Чем занимается jQuery .scrollTop ().