Скроллинг к элементу на jQuery

Небольшой скрипт для плавного скроллинга (прокрутки) страницы к указанному элементу. Скрипт работает так: ловит событие клика по ссылке элементу с классом go_to и атрибутом href=»#element» или href=».element», где element — это id/класс элемента к которому нам надо прокрутить страницу, дальше с помощью animate анимируем событие прокрутки.

1
2
3
4
5
6
7
8
9
$(document).ready(function(){
    $('.go_to').click( function(){ // ловим клик по ссылке с классом go_to
    var scroll_el = $(this).attr('href'); // возьмем содержимое атрибута href, должен быть селектором, т.е. например начинаться с # или .
        if ($(scroll_el).length != 0) { // проверим существование элемента чтобы избежать ошибки
        $('html, body').animate({ scrollTop: $(scroll_el).offset().top }, 500); // анимируем скроолинг к элементу scroll_el
        }
        return false; // выключаем стандартное действие
    });
});

Теперь при нажатии на ссылку

1
<a class="go_to" href="#elm">Туда</a> или <a class="go_to" href=".elm">Сюда</a>

страница плавно проскроллится к элементу с id=»elm» или class=»elm» соответственно.

Share this post:

Recent Posts