Плавный скроллинг к элементу на jQuery

Очередная шпаргалка, реализуем плавный скроллинг к элементу на странице с помощью 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, поэтому она изначально должна быть подключена. Остались вопросы или есть замечания, пишем в комментариях.

Также может быть интересно