Анимировать прокрутку до идентификатора при загрузке страницы

123

Я собираюсь анимировать прокрутку до определенного идентификатора при загрузке страницы. Я провел много исследований и наткнулся на следующее:

$("html, body").animate({ scrollTop: $('#title1').height() }, 1000);

но похоже, что это начинается с идентификатора и анимируется в верхней части страницы?

HTML (который находится на полпути вниз по странице) просто:

<h2 id="title1">Title here</h2>
jquery scroll jquery-animate Adi
источник
1
Это не лучший ответ, но я настоятельно рекомендую плагин "scrollTo" Ариэля Флеслера; у него есть множество функций для панорамирования страницы и несколько расширений плагина для общих случаев (например, вы можете найти его плагин "LocalScroll" полезным для прокрутки до href ссылки, если она находится на той же странице). Вы можете получить плагин здесь: flesler.blogspot.com/2007/10/jqueryscrollto.html
Фейсал,

Ответы:

327

Вы только прокручиваете высоту своего элемента. offset () возвращает координаты элемента относительно документа, а topparam даст вам расстояние до элемента в пикселях по оси Y:

$("html, body").animate({ scrollTop: $('#title1').offset().top }, 1000);

А еще к нему можно добавить задержку:

$("html, body").delay(2000).animate({scrollTop: $('#title1').offset().top }, 2000);
BumbleB2na
источник
1
Что такого такого в автоматической прокрутке, что заставляет меня кричать «ВАУ КРУТО !!»? Может быть, дело в простоте вашего решения.
theblang 02
Мне нужно было прокрутить элемент для просмотра при загрузке страницы, но возникли две проблемы: а) использование «html, body» дало два обратных вызова (по одному для каждого совпадающего элемента). б) Это зависит от браузера, какой из body или html работает. Итак, я сделал суть, которую вы можете адаптировать для использования в своем проекте, чтобы убедиться, что функция scroll-in-view работает в «любом» браузере и что вы получите только один обратный вызов по окончании анимации. gist.github.com/netsi1964/4ddffe1ae14e05220d25
Netsi1964
2
Это не совсем правильно. Вам действительно следует учитывать текущую позицию прокрутки тела или элемента, который мы пытаемся сделать scroll. Имея это в виду, вы должны добавить текущую позицию прокрутки bodyк offset().topпозиции элемента, который мы хотим видеть. Результирующая сумма - это значение, до которого мы хотим прокрутить. $('html, body').animate({ scrollTop: ($('html, body').scrollTop() + $('#title1').offset().top) }, 1000);
mattdevio
@magreenberg вы пробовали это? Если текущая позиция прокрутки превышает значение 0, то то, что вы предлагаете, может не сработать. Предположим, что прокручиваемый контейнер имеет высоту 1000 пикселей, а текущая позиция прокрутки - 1000. Предположим, элемент, к которому вы прокручиваете, находится в вертикальном центре на 500. Я думаю, что то, что вы предлагаете, скажет ему прокрутить до 1500 , право?
BumbleB2na
@ BumbleB2na .offset().topдаст вам отрицательное число в этом случае. И это действительно работает только для bodyи htmlпоскольку offset().topдаст вам верхнее смещение документа, а не предполагаемый родительский элемент прокрутки.
mattdevio
12

Решение на чистом javascript с функцией scrollIntoView () :

document.getElementById('title1').scrollIntoView({block: 'start', behavior: 'smooth'});
<h2 id="title1">Some title</h2>
Развернуть фрагмент

Параметр PS 'smooth' теперь работает в Chrome 61, как упоминалось в комментариях julien_c .

Владимир Вовк
источник
1
Работает сейчас (из Chrome 61)
julien_c
Обязательно проверьте совместимость браузера. По состоянию на 10/2018 IE (11), Edge и Safari поддерживают «scrollIntoView», но не «плавный» вариант.
metal_jacke1 06
Чистый JS ftw. Спасибо за этот фрагмент! Гладкий как двойное масло крем
jean d'arme
3

Для этого есть плагин jquery. Он прокручивает документ к определенному элементу, чтобы он находился идеально посередине области просмотра. Он также поддерживает замедление анимации, чтобы эффект прокрутки выглядел очень плавным. Проверить эту ссылку .

В вашем случае код

$("#title1").animatedScroll({easing: "easeOutExpo"});
Евгений Тюрин
источник
«Он также поддерживает замедление анимации, чтобы эффект прокрутки выглядел супер плавным». К сожалению, это не так. Если компьютер по какой-то причине работает медленно, он просто продолжает прыгать, не двигаясь должным образом.
brunoais
Плавная прокрутка требует вычисления большого количества пикселей. Конечно, медленный «компьютер» (с большим количеством графических процессоров) не может этого сделать, но из-за отсутствия достаточного количества ALU. Так что в целом он прав. И действительно легкая прокрутка lib.
Роланд
1

попробуйте со следующим кодом. сделать элементы с именем класса page-scroll и сохранить имя идентификатора hrefсоответствующих ссылок

$('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: ($($anchor.attr('href')).offset().top - 50)
        }, 1250, 'easeInOutExpo');
        event.preventDefault();
    });
Akhil
источник
-3

для простой прокрутки используйте следующий стиль

высота: 200 пикселей; переполнение: прокрутка;

и используйте этот класс стиля, какой div или раздел вы хотите показать, прокрутите

мм
источник