Плавная прокрутка страницы на jQuery

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

Для работы нам потребуется jQuery, чтобы упростить анимацию.

Сначала рассмотрим кому это может пригодится:

тем, кому нужно сделать кнопку “Наверх” для длинных страниц
тем, кому нужно плавно переводить пользователя к нужному месту страницы

Так как сделать плавную прокрутка страницы на jQuery?

Все просто, как никогда. Для того, чтобы прокрутить страницу есть такое свойство scrollTop. Это свойство отвечает за прокрутку страницы, и в зависимости от браузера находится или в тэге html или в тэге body.

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

var top=расстояние_прокрутки_в_пикселях;
var speed=скорость_прокрутки_в_миллисекундах;
$('html, body').animate({scrollTop: top}, speed);

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

В качестве переменных нужно подставить соответствущие данные.

Переменная top должна быть положительным числом, которое соответствует расстоянию прокрутки страницы.

Как сделать прокрутка страницы к нужному блоку?

Для того, чтобы сделать прокрутка страницы jQuery к нужному блоку нужно определить как далеко этот блок рассположен от начала страницы по вертикали.
Для этого у jQuery есть отличная функция: offset.
Итак получим расстояние для прокрутки до нужного блока:

var top=$('селектор_нужного_элемента').offset().top;
//ну а дальше код с анимацией прокрутка страницы

Плавность прокрутка страницы можно регулировать при помощи параметра speed. Чем больше speed, тем плавнее ход анимации. Также обратите внимание, что speed одинаковый для всей страницы, а расстояние прокрутки может быть разным. То есть для того, чтобы прокрытить страницу из конца в самое начало потребуется больше прокурчиваний, чем чтобы прокрутить из середины в начало. Поэтому прокрутка страницы снизу вверх будет быстрее, чем из середины вверх (это можно корректировать параметром speed для разных случаев).