Очередная шпаргалка, реализуем плавный скроллинг к элементу на странице с помощью jQuery.
Задача скрипта простая и заключается в следующем, он отлавливает все ссылки с классом .flowing-scroll, читает атрибут href и прокручивает страницу к нужному элементу. Атрибут href должен содержать уникальный селектор элемента, например, «.goToMe«, «#goToMe«, «[name=goToMe]«. Если же указать не уникальный селектор, к примеру, класс goToMe будет у нескольких элементов, то скрипт отправит нас к первому из них.
Ссылка должна выглядеть следующим образом:
<a href="#goToMe" class="flowing-scroll other-class">перейти</a>
Сам скрипт плавного скроллинга
$('.flowing-scroll').on( 'click', function(){
var el = $(this);
var dest = el.attr('href'); // получаем направление
if(dest !== undefined && dest !== '') { // проверяем существование
$('html').animate({
scrollTop: $(dest).offset().top // прокручиваем страницу к требуемому элементу
}, 500 // скорость прокрутки
);
}
return false;
});
Не забываем, что скрипт написан с использованием библиотеки jQuery, поэтому она изначально должна быть подключена. Остались вопросы или есть замечания, пишем в комментариях.
