Плавный скролл страницы с помощью jQuery плагина

· JavaScript и Блог · 1 мин чтения

В этом записи я покажу вам плагин, который позволяет менять скорость прокрутки на сайте.

Очень простой плагин, который позволяет настроить скорость прокрутки на сайте по вертикали и/или горизонтали.

Основное

Ниже представлена общая информация о плагине.

Название: jQuery.scrollSpeed

СсылкаjQuery.scrollSpeed

Автор: Nathan Rutzky

Актуальная версия:  1.0.2

Поддержка браузеров

  • Chrome
  • Safari (ПК)
  • IE
  • Firefox
  • Opera (по документации написано, что не тестировано. Я сам лично проверил на версии 34 — все работает.)

И так начнем процесс установки плагина.

PS. Перед началось настройки скрипта, на вашем сайте должен быть установлен jQuery. Без него данный плагин работать не будет.

1. Скачиваем скрипт

Скачать скрипт архивом можно по этой ссылке.

2. Подключаем скрипт

Вам нужно подключить скрипт на ваш сайт. Желательно перед закрытием тега </body>.

<script src="/путь/до/скрипта/jQuery.scrollSpeed.js"></script>

PS. Не забудьте поставить ваш собственный путь до скрипта.

3. Меняем скорость прокрутки

$(function() {  

    // По стандарту
    jQuery.scrollSpeed(100, 800);

    // Собственная анимация при прокрутке 
    jQuery.scrollSpeed(100, 800, 'easeOutCubic');

});

На строке 4, я установил прокрутку сайта такой, какая она обычно есть во всех браузерах.

На строка 7, я установил скорость прокрутки такой же как на строке 4, но при прокрутке будет присутствовать анимация «easeOutCubic».

Если вы поставите как на строке 7, то прокрутка на вашем сайте должна стать плавнее.

Демо

Посмотреть демо можно на этой странице.