Плавная прокрутка страницы с помощью jQuery: scrollTop

Быстрый ответ

С помощью метода animate() из библиотеки jQuery можно анимированно прокрутить страницу к нужному HTML-элементу. Ниже приведён пример того, как это может быть реализовано:

$('html, body').animate({ scrollTop: $('#yourElement').offset().top }, 'slow');

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

Подробно о прокрутке с поддержкой анимации

Контроль скорости: регулирование длительности анимации

Скорость анимации прокрутки зависит от её продолжительности. Чтобы регулировать это, можно установить нужное время:

$('html, body').animate({ scrollTop: 300 }, 1000); // Прокрутка произойдёт за 1 секунду.

Подробнее об этом расскажет наш спикер на видео

Действия после анимации: использование промисов и коллбэк-функций

Для добавления действий после окончания прокрутки возможно использовать коллбэк-функцию:

$('html, body').animate({ scrollTop: 300 }, 'slow', function() {
    console.log('Мы достигли заданной позиции!');
});

Также применимы промисы для создания асинхронных операций в рамках последовательности событий:

$('html, body').animate({ scrollTop: 300 }, 'slow').promise().done(function() {
    console.log('Прокрутка успешно завершена!');
});

Эффективные и совместимые операции прокрутки

Для улучшения производительности и обеспечения совместимости лучше выбрать один элемент для анимации:

var $scrollElement = $('html, body').scrollTop() ? $('html, body') : $('body');
$scrollElement.animate({ scrollTop: 300 }, 'slow');

Предоставление пользователю возможности управлять прокруткой во время анимации

Позволяет прервать анимацию, если у пользователя появится такое желание:

$('html, body').on('scroll mousedown wheel DOMMouseScroll mousewheel keyup touchmove', function(){
    $(this).stop();
});

Делаем движение более естественным с помощью сглаживания

Сглаживание сделает анимацию прокрутки более натуральной:

$('html, body').animate({ scrollTop: 300 }, 'slow', 'swing');

Обработка крайних ситуаций

Всегда учтите возможные исключения, когда, например, элемент является невидимым:

if ($yourElement.is(':visible')) {
    $('html, body').animate({ scrollTop: $yourElement.offset().top }, 'slow');
}
$('html, not(body)').animate({ scrollTop: 300 }, 'slow');

Визуализация

Представьте себе прокрутку документа как путешествие вдоль вертикальной оси:

$('html, body').animate({ scrollTop: '200px' }, 'slow');

Это команда на смещение экрана по вертикали на 200 пикселей вниз, идущую с замедлением, благодаря чему видимые области страницы изменяются плавно.

Мгновенная прокрутка — без анимации

Если вам нужно немедленно изменить позицию прокрутки без анимации, просто установите значение scrollTop напрямую:

$(window).scrollTop(300); // Мгновенное смещение до позиции на 300px.

Полезные материалы

1. .animate() | Документация jQuery API — официальная документация по анимациям в jQuery.
2. Плавная прокрутка | CSS-Tricks — подробности реализации плавной прокрутки с помощью jQuery.
3. Как создать эффект плавной прокрутки — структурированное руководство по созданию плавной прокрутки без применения jQuery.
4. GitHub – flesler/jquery.scrollTo: Удобный плагин jQuery для анимированной прокрутки — гибкий инструмент для настройки прокрутки.
5. jQuery.scrollTo — демонстрации работы плагина jQuery scrollTo.
6. jQuery Easing Plugin — расширенные варианты эффектов сглаживания для jQuery.