Плавная прокрутка страницы к нужному элементу - важная и полезная функция для удобства пользователей сайта. С помощью библиотеки jQuery реализовать это проще простого. Давайте разберемся как сделать плавный скролл к любому элементу на сайте с помощью готового jQuery плагина.
Основы работы jQuery плагина ScrollTo
Плагин ScrollTo был создан в 2013 году с целью реализовать плавную прокрутку страницы к нужному элементу. Он позволяет скроллить к пикселям, процентам страницы, элементам по идентификатору или другому селектору.
Принцип работы ScrollTo похож на стандартную анимацию jQuery - передаются параметры цели, времени и настроек. При этом скроллить можно не только главное окно, но и отдельные прокручиваемые блоки.
Плагин поддерживает все настройки анимации jQuery - скорость, функцию эффекта, задержки и другое. Кроме того, можно изменить настройки ScrollTo по умолчанию.
Плагин ScrollTo создан специально для решения задачи плавного скролла к элементу на странице
Примеры использования ScrollTo
Давайте разберем конкретные примеры работы с плагином на тестовой странице. Сначала подключаем необходимые библиотеки jQuery и ScrollTo:
<script src="jquery.js"></script> <script src="jquery.scrollTo.js"></script>Затем добавим на страницу элемент с идентификатором для скролла к нему:
<div id="target">Целевой блок</div>Теперь создаем кнопку для запуска скролла:
<button id="scrollBtn">Скролл к блоку</button>И напишемжавасцрипт-скрипт для скролла по клику на эту кнопку:
$('#scrollBtn').click(function() { $.scrollTo('#target'); });Вот и вся реализация плавного скролла к нужному элементу. Давайте теперь разберем дополнительные параметры.
Мы можем указать не только целевой элемент, но и скролл к определенному числу пикселей или процентам прокрутки:
$.scrollTo(500); // Скролл к 500 пикселям от верха $.scrollTo('60%'); // Скролл к 60% длины страницы"scrollto jquery" Также плагин позволяет скроллить не только главное окно, но и отдельные прокручиваемые блоки, например:
$('.scrollable').scrollTo('#inner-target');Для большей гибкости можно использовать data-атрибуты у кнопки запуска скролла вместо жестко заданных параметров.
Рассмотрим некоторые настройки скорости, эффекта и других параметров скролла с помощью ScrollTo:
Настройка скорости и эффекта
Одним из важных параметров при вызове метода scrollTo() является продолжительность скроллинга в миллисекундах. Чем больше число, тем медленнее будет прокрутка. Например, так укажем плавный скролл за 2 секунды:
$.scrollTo('#target', 2000);По умолчанию используется эффект swing, но его можно поменять. Например, применим плавный эффект easeOutQuad:
$.scrollTo('#target', 2000, {easing:'easeOutQuad'});
"Scrolltop" прокрутка и настройки оси
По умолчанию scrollTo скроллит только по вертикали. Но можно включить горизонтальную прокрутку или обе сразу:
$.scrollTo('#target', 2000, {axis:'xy'});Также для вертикальной оси есть специальное свойство scrollTop. Мы можем получить его значение или установить вручную после скролла:
var top = $(window).scrollTop(); // Получаем текущее значение $.scrollTo('#target', 2000, {scrollTop: top}); // Сохраняем после скроллаОбработка события после скролла
У плагина ScrollTo есть удобная функция обратного вызова, которая срабатывает сразу после завершения анимации скролла. Это позволяет выполнить нужный код в правильный момент:
$.scrollTo('#target', 2000, { onAfter: function() { alert('Скроллинг завершен!'); } });Сравнение с другими способами скролла
"scrolltop jquery примеры" Есть и другие способы программной прокрутки страницы на jQuery, например метод animate или свойство scrollTop. Давайте сравним их с ScrollTo.
Метод animate позволяет анимировать скролл, но менее удобен в настройке. Свойство scrollTop прокручивает мгновенно без эффектов. Поэтому плагин ScrollTo - оптимальный вариант для плавного скроллинга.
