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

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

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

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


Это решение отлично подойдет в сочетании с нашим скриптом "Случайная анимация появления блоков": https://ukit.top/scripts/sluchaynaya-animatsiya-poyavleniya-blokov-na-ukit

 



Установка

Перейдите в панель управления вашего сайта в раздел «Свой код». В редактор вставьте следующий код:
 

Код
<script>
require(['jquery'], function($){
    (function($) {
        jQuery.scrollSpeed = function(step, speed, easing){
            var $document = $(document),
                $window = $(window),
                $body = $('html, body'),
                option = easing || 'default',
                root = 0,
                scroll = false,
                scrollY,
                view;
                
            if(window.navigator.msPointerEnabled) return false;
            
            $window.on('mousewheel DOMMouseScroll', function(e){
                if($('.js-aDialogOpened').length == 0){
                    var deltaY = e.originalEvent.wheelDeltaY,
                        detail = e.originalEvent.detail;
                        scrollY = $document.height() > $window.height();
                        scroll = true;
                    
                    if(scrollY){
                        view = $window.height();
                        if (deltaY < 0 || detail > 0)
                            root = (root + view) >= $document.height() ? root : root += step;
                        if (deltaY > 0 || detail < 0)
                            root = root <= 0 ? 0 : root -= step;
                        $body.stop().animate({
                            scrollTop: root
                        }, speed, option, function() {
                            scroll = false;
                        });
                    }
                    
                    return false;
                }
                
            }).on('scroll', function() {
                if (scrollY && !scroll) root = $window.scrollTop();
            }).on('resize', function() {
                if (scrollY && !scroll) view = $window.height();
            });       
        };
        
        jQuery.easing.default = function (x,t,b,c,d){
            return -c * ((t=t/d-1)*t*t*t - 1) + b;
        };
        
    })(jQuery);
    
    $.scrollSpeed(100, 1000); // cкорость прокрутки
});
</script>


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


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