Как сделать плавную прокрутку на сайте

Плавная прокрутка сайтаПривет, друзья. Сегодня поговорим о плавной прокрутке сайта. То есть не о скролле к якорю, при нажатии на кнопку или ссылку, а о плавной прокрутке при использовании колесика или ползунка.

Совсем коротенькая заметка, просто пришлось реализовать на одном из сайтов, и решил написать об этом в блог, пока готовлю более серьезную статью (виджет скидок), по просьбе одного из читателей. Артем, привет тебе. Я не забыл!

Конечно, многие пользуются браузерами, у которых и так настроена плавная прокрутка, многие используют специальное расширение для браузера, но не все. Давайте же добьемся плавности на большинстве устройств, с которых будут посещать ваш сайт.

Плагин для плавной прокрутки сайта

Для решения поставленной задачи я выбрал плагин Malihu-custom-scrollbar-plugin, так как у него очень много возможностей:

  • Вертикальная и / или горизонтальная полоса прокрутки.
  • Настраиваемый импульс прокрутки.
  • Плавная прокрутка колесиком мыши.
  • Плавная прокрутка за ползунок.
  • Поддержка клавиатуры и плавная прокрутка стрелочками или PgUp/PgDn.
  • Поддержка сенсорных экранов.
  • Готовые к использованию темы.
  • Ручная настройка с помощью CSS.
  • Разные варианты отображения ползунка.
  • Возможность добавить плавный скролл различным элементам на странице, у которых он присутствует.

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

Итак, самое время посмотреть демку. Автор уже приготовил отличный вариант:

Посмотреть пример

"Стоп, плавный scroll в различных блоках это хорошо, но где же сама плавная прокрутка сайта из-за который мы пришли?" - скажете вы. Спокойствие. Сейчас мы этим займемся.

Подключения плагина

Так как выбранное решение - это jQuery плагин, то первым делом и подключим к сайту сам jQuery, если он у вас не подключен.

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Теперь скачайте плагин для плавной прокрутки, по ссылке выше, и подключите к сайту 2 файла.

  • jquery.mCustomScrollbar.concat.min.js
  • jquery.mCustomScrollbar.min.css

Получится такая структура:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Плавный скролл сайта</title>
  <meta name="author" content="DimaDV7">
  <link rel="stylesheet" href="./css/jquery.mCustomScrollbar.min.css">
</head>
<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="./js/jquery.mCustomScrollbar.concat.min.js"></script>
</body>
</html>

Главное помните, что все зависящие от jQuery плагины должны подключаться после самого jQuery.

После того как все подключили, нужно инициализировать скрипт:

<script>
    (function ($) {
      $(window).on("load", function () {
        $('body').mCustomScrollbar({
          theme: "dark-thin"
        });
      });
    })(jQuery);
</script>

И добавить в CSS несколько простых правил, чтобы прокрутка применилась к документу. В самом начале вашего файла стилей добавьте следующую разметку:

body, html {
  height: 100%;
  overflow: hidden;
}

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

Обратите внимание, что на этой странице около 50 опций для тонкой настройки плагина. Например, в исходнике я использую следующие:

  • theme: - тема для отображения скролла;
  • autoHideScrollbar - включение или отключение автоматического скрытия полосы прокрутки при неактивном состоянии;
  • autoExpandScrollbar - включение или отключение автоматического расширения полосы прокрутки при перемещении курсора или перетаскивании полосы прокрутки;
  • scrollEasing: - тип анимации;
  • mouseWheel: { scrollAmount: '300' } - количество пикселей, на которое будет осуществлена прокрутка при кручении колесика мыши

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

Более простое решение для плавной прокрутки, если вам не нужны навороты

Если вам не нужны никакие дополнительные функции, кроме как плавная прокрутка при скролле колесика мыши, то воспользуйтесь плагином jQuery.scrollSpeed

Подключается точно так же как и первый, имеет всего 3 настройки и весит всего 2.6 килобайт:

$(function() {
 jQuery.scrollSpeed(100, 800, 'easeOutCubic');
})

Где первое число - это шаг прокрутки, второе число - это скорость, а третье - тип анимации.

На этом - все. Всем - пока.

Понравилась статья? Не хотите пропустить следующие материалы о самостоятельном создании и раскрутке landing page?

Подпиcывайтесь на обновления!

Добавить комментарий