jQuery скролл к элементу с помощью scrollTo

Плавная прокрутка страницы к нужному элементу - важная и полезная функция для удобства пользователей сайта. С помощью библиотеки 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 - оптимальный вариант для плавного скроллинга.