Довольно часто необходимо реализовать плавную прокрутку страницы сайта при навигации по якорям ссылок при создании лендинга или при нажатии на кнопку «Вверх» в нижней части.
Так же плавная прокрутка помогает пользователю лучше понимать, что происходит переход по якорной ссылке. А это важно для улучшения поведенческих характеристик сайта и при продвижении сайта в Google.
Добавить скрипт можно без особых проблем при базовых навыках работы с HTML кодом.
Собственно сам код выглядит так
jQuery(function($){
$(document).ready(function(){
$(«#menu»).on(«click»,»a», function (event) {
event.preventDefault();
var id = $(this).attr(‘href’),
top = $(id).offset().top;
$(‘body,html’).animate({scrollTop: top}, 1000);
});
});
});Для адаптации под проект нужно в коде изменить ID меню. Если меню «id=»menu»», то оставляем как есть.
Далее, якорям помимо атрибута «name», нужно так же присвоить id с таким же именем. Если в теме уже есть поле для прописывания JQuery кода, то вставлять jQuery(function($){…}); не нужно.
Скорость скролла регулируется здесь $(‘body,html’).animate({scrollTop: top}, 1000); в миллисекундах.
Быстро, просто и работает.
