Плавный скролл сайта
Сегодня будет делать плавную прокрутку сайта. Для чего это нужно мне не совсем понятно, выглядит красиво, но при быстрой прокрутке начинает тупить и вся красота сходит на нет. Ну что же начнем. Вначале вставлю код, а дальше объясню что каждая строчка делает. Да естественно понадобится наша любимая библиотеке 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 сек. Все просто