Скрипты для uKit 18.09.2017 6 5773
Эффект плавной прокрутки сайта

Эффект плавной прокрутки сайта

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

Этот эффект хорошо подойдёт для длинной главной страницы, которая в информативной форме содержит и введение в тематику, и предлагаемые услуги, и прайс-лист, и особенности и нюансы. Установка не должна вызвать затруднений, поскольку он совместим со всеми нашими остальными скриптами. Эффект будет полезен для улучшения дизайна сайта и повышения "дружелюбности" интерфейса. Даже на маломощных машинах сайт со скриптом работает без задержек. Более подробные инструкции по установке и наладке этого и многих других скриптов вы можете найти на сайте.

 



Установка

Перейдите в панель управления вашего сайта в раздел «Свой код» два кода, один из которых вы установите в Head, а другой в Body. Для этого в редактор вставьте следующий код:
 

Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js" integrity="sha256-huW7yWl7tNfP7lGk46XE+Sp0nCotjzYodhVKlwaNeco=" crossorigin="anonymous"></script>

 

Во вкладке «Настройки» в разделе «Выводить код» отметьте пункт «В <head>». (скриншот).

 

Код
<script>

SmoothScroll({
    // Время скролла 400 = 0.4 секунды
    animationTime    : 800,
    // Размер шага в пикселях 
    stepSize         : 75,

    // Дополнительные настройки:
    
    // Ускорение 
    accelerationDelta : 30,  
    // Максимальное ускорение
    accelerationMax   : 2,   

    // Поддержка клавиатуры
    keyboardSupport   : true,  
    // Шаг скролла стрелками на клавиатуре в пикселях
    arrowScroll       : 50,

    // Pulse (less tweakable)
    // ratio of "tail" to "acceleration"
    pulseAlgorithm   : true,
    pulseScale       : 4,
    pulseNormalize   : 1,

    // Поддержка тачпада
    touchpadSupport   : true,
})
</script>

 

Во вкладке «Настройки» в разделе «Выводить код» отметьте пункт «В конец <body>». (скриншот).
Сохраните код и опубликуйте ваш сайт.


Установить сторонний код на ваш сайт, вы можете на тарифе «Про». Ознакомиться с тарифом вы можете на следующей странице: blog-ru.ukit.com/updates/tariffs. Также отмечу, что вы можете обратиться в службу поддержки uKit за помощью в установке кода на тарифах «Минимальный» и выше, через раздел «Помощь» (скриншот). 
Всего комментариев: 6
avatar
1
Здравствуйте! Спасибо за скрипт. При переходе по якорной ссылке и затем прокрутке колёсиком мыши, экран возвращается на место первоначального клика по кнопке с якорной ссылкой. При повторном переходе по этой же кнопке все работает как надо. В чем может быть проблема?
avatar
-1
2
У вас установлен плавный переход по якорям? Если да, то эти скрипты не совместимы и создавались разными разработчиками.
avatar
3
Здравствуйте! Аналогичная проблема с возвратом на место первоначального клика по кнопке с якорной ссылкой. плавный переход по якорям не установлен. Посмотрите, пожалуйста: cmbiz.ru - кнопка "контакты"
avatar
4
у меня также и на многих сайтах, плавный переход по якорям тут ни при чем, т.к. его ни разу не использовал, а проблема возврата наверх страницы вместо нужного якоря наблюдается
avatar
5
так что по поводу бага с возвратом в верхнее положение сайта при первом клике по меню? пример такой ошибки на сайте narodnaya-mebel.ru

причем этот эффект наблюдается толко когда первый раз кликаешь по меню и СРАЗУ начинаешь скроллить, если кликаешь по меню и потом по сайту кликаешь, то ошибки нет
avatar
0
6
Обновили данный код и теперь работает стабильнее
avatar