Як додати плавний скролл на сайт: покрокова інструкція
Плавний скролл на сайті — це функція прокручування веб-сторінки вгору або вниз за допомогою прокрутки колеса миші або ж пальцями на сенсорному екрані. При цьому можна спостерігати такий візуальний ефект як плавність (замість миттєвого і різкого переміщення) що у свою чергу робить перегляд контенту сайту більш привабливим та зручним для користувачів. Сьогодні я дам вам коротку інструкцію про те, як додати плавний скролл на сайт.
Як додати плавний скролл на сайт?
Для цього нам знадобиться підключити наступний JavaScript у шаблоні сайту (або сторінки), а саме між тегами <head> </head> :
<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js" integrity="sha256-huW7yWl7tNfP7lGk46XE+Sp0nCotjzYodhVKlwaNeco=" crossorigin="anonymous"></script>Окрім цього, ви також можете додати наступний код (нижче, під попереднім) для швидкого і зручного внесення змін щодо налаштувань плавного скроллу під свої потреби:
<script>
SmoothScroll({
animationTime : 800,
stepSize : 75,
accelerationDelta : 30,
accelerationMax : 2,
keyboardSupport : true,
arrowScroll : 50,
pulseAlgorithm : true,
pulseScale : 4,
pulseNormalize : 1,
touchpadSupport : true,
})
</script>
| Параметр | Значення |
|---|---|
animationTime |
Час скроллу (400 = 0.4 секунди) |
stepSize |
Розмір кроку у пікселях |
accelerationDelta |
Прискорення |
accelerationMax |
Максимальне прискорення |
keyboardSupport |
Підтримка клавіатури (якщо ні, то false) |
arrowScroll |
Крок скролла стрілками на клавіатурі у пікселях |
touchpadSupport |
Підтримка тачпаду (якщо ні, то false) |
Сподіваюсь, вам вдалось прикрасити свій сайт цим чудовим ефектом плавного скроллу, але ж якщо у вас виникли з цим труднощі чи за невідомих причин скрипт не спрацював — прошу, задавайте питання і я допоможу вам вирішити цю проблему 😉
