Плавный скролл сайта

Плавный скролл сайта

Сегодня будет делать плавную прокрутку сайта. Для чего это нужно мне не совсем понятно, выглядит красиво, но при быстрой прокрутке начинает тупить и вся красота сходит на нет. Ну что же начнем. Вначале вставлю код, а дальше объясню что каждая строчка делает. Да естественно понадобится наша любимая библиотеке Jquery
    $(document).on('mousewheel', function(event) {
        var top = $(window).scrollTop() - (event.originalEvent.wheelDelta );
        event.preventDefault();
         $('html, body').stop().animate({
            scrollTop: top
        }, 200);
    })
И так начнем с самого начала, ставим обработчик на документ который отслеживает движение колесика. При движении колеса выполняется функция в которую передаются параметры самого колесика. Двигаем вниз сайт значение отрицательно, двигаем вверх положительное.

Далее создаем переменную в которой получаем текущее значение окна сайта и либо прибавляем либо вычитаем значение движения колесика. В этой строчке можно увеличить высоту скролла добавив переменную которая будет то положительно то отрицательная в зависимости от значения event.

Следующая строка отменяет стандартное действие по движению колесика.

И под конец на документе html или body останавливаем все анимации и запускаем анимацию плавного скроллинга до полученной точки, с длинной анимации в 0,2 сек. Все просто

Возврат к списку