Привет, сегодня разберемся как сделать такую фишку для вашего сайта, как плавная прокрутка страницы.
Для работы нам потребуется 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 для разных случаев).