7158 Web Working 4 Июня 2017



smoothscroll.js - плавная прокрутка в браузереJava Script

Все вы наверное замечали на некоторых сайтах эффект при прокрутке страницы колесиком мышки или с помощью клавиатуры, когда страничка сайта прокручивается плавно, а не рывками, и в конце анимации так же плавно замедляется до полной остановки. Такой эффект уже присутствует в браузере FireFox, и, если мне не изменяет память, то такой же эффект имеется в устройствах фирмы Apple (iPhone, iPad и пр.) но на других устройствах и в других браузерах такой эффект отсутствует и прокрутка страницы происходит "рывками".

Оценить эффект плагина вы можете непосредственно на этой странице. Попробуйте отключить скрипты на странице и сравнить результат.

В этой статье я расскажу как добиться такого же эффекта на вашем сайте, независимо от устройства и браузера.

Первое что нам следует сделать, это скачать сам плагин jQuery.

На сайте Github

После скачивания полученный файл jquery.smoothscroll.js нужно подключить к страницам вашего сайта (с точки зрения Google, подключать нужно скрипт перед закрывающим тегом BODY).

На этом вы можете завершить чтение статьи, так как после подключения этого скрипта вы уже получили желаемый эффект.

Для тех, кто хотел бы немного настроить скрипт под себя, давайте рассмотрим доступные параметры.

Из того что может понадобиться настроить я выделил вот эти параметры:

    скорость анимации прокрутки
    высоты прокрутки за один такт скрола мыши (не оборот колесик, а именно такт)
    шаг прокрутки за одно нажатие кнопок ↓  ↑ → ←

Для изменения длительности анимации прокрутки меняем значение 600 в этой строке на свое:

var animtime  = 600; // [px]    400

Для изменения высоты прокрутки за один так мыши меняем значение 150 на свое в этой строке:

var stepsize  = 150; // [px]    120
Для изменения высоты прокрутки за нажатие по кнопкам ↓  ↑ → ← меняем значение 50 на свое в этой строке:

var arrowscroll     = 50; // [px]   50
В принципе этого должно быть достаточно для настройки скрипта под ваши требования. Для более тонкой настройки скрипта вы всегда можете поэкспериментировать с другими параметрами.

Github

Рейтинг:

Поделится с друзьями:

Вы можете оставить свой комментарий:


98

материалов о web-разработке

1345

читателей нашего блога

15

городов и стран

96

разработанных проектов