Демо Скачать

Как то в одном из проектов встала такая задача, реализовать такой эффект, что бы при клике по элементу меню была прокрутка до определенного элемента на странице.

Сперва нам понадобится подключить необходимые библиотеки:

• JQuery,
• скрипт, который отвечает за прокрутку
• скрипт, который определит скорость течения анимации при скроле, делая её более реалистичной.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.scrollto/2.1.0/jquery.scrollTo.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.easing/1.3/jquery.easing.1.3.min.js"></script>

Теперь нужно добавить якоря, к которым будет происходить прокрутка.

<a id="two"><h2>Фервать</h2></a>
<a id="three"><h2>Март</h2></a>
<a id="four"><h2>Апрель</h2></a>
<a id="five"><h2>Май</h2></a>

Как видите все очень просто, в данном слечае мы привязали якоря к заголовкам, после которых будет текст и какой-нибудь информацией

Добавим на странице само меню (для того, что бы был переход, достаточно добавить ссылку на идентификатор):

<nav class="nav">
    <a href="#one">Январь</a>
    <a href="#two">Фервать</a>
    <a href="#three">Март</a>
    <a href="#four">Апрель</a>
    <a href="#five">Май</a>
    <a href="#six">Июнь</a>
</nav>

Вот наш скрипт:

$(function() {
    $('.nav a').bind('click', function(event) {
        var anchor = $(this);
        $('html, body').stop().animate({
        scrollTop: $(anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

Тут мы исользовали такой эффект как easeInOutExpo. Другие эффекты вы найдете на сайте самого плагина jquery.easie.js.

Как по мне, это очень удачный пример реализации. Если кто то сможет его упростить или улучшить, буду вам признателен, пишите в комментариях.

На сегодня - все. Теперь вы знаете, как реализовать такой классный эффект, как плавная прокрутка страницы к якорю. Всем пока!