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

Для работы нам потребуется 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 для разных случаев).