Плавный скролл после нажатия на якорную ссылку

7 декабря 2019 | Qudrat Qodirov | HTML + CSS Для сайта Полезное | 8

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

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

1. Структура меню с якорными ссылками

Чтобы при нажатии по ссылке мы переходили к определенному блоку, абзацу, необходимо в атрибут href прописать имя идентификатора того блока на который мы хотим сослаться, например:
у нас есть блока <div id=”main”>…</div>, внутренняя ссылка на этот блок будет иметь следующий вид: <a href=”#main”></a>
Таким образом все ссылки ссылаются на ID блоков.
Вот и сам код меню из демо-примера:

<nav id="menu">
    <ul>
        <li><a href="#ex1">Link #1</a></li>
        <li><a href="#ex2">Link #2</a></li>
        <li><a href="#ex3">Link #3</a></li>
        <li><a href="#ex4">Link #4</a></li>
    </ul>
</nav>

<ul>

</ul>

</nav>

Каждая ссылка ссылается на соответствующий блок:

<div id="content">
    <section id="ex1">
        ...
    </section>
    <div class="separator"></div>
    <section id="ex2">
        ...
    </section>
    <div class="separator"></div>
    <section id="ex3">
        ...
    </section>
    <div class="separator"></div>
    <section id="ex4">
        ...
    </section>
</div>

...

</section>

...

</section>

...

</section>

...

</section>

</div>

2. Скрипт плавного перехода к нужному блоку

Для начала в шапку перед закрывающимся head или в подвал перед закрывающимсяbody нужно подключить библиотеку jQuery.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

1	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

Итак нам нужно обработать нажатия по ссылкам в нашем меню, отменить стандартное поведение, выяснить на какой блок ссылается якорь и анимировать переход.

$(document).ready(function(){
    $("#menu").on("click","a", function (event) {
        //отменяем стандартную обработку нажатия по ссылке
        event.preventDefault();

        //забираем идентификатор бока с атрибута href
        var id  = $(this).attr('href'),

        //узнаем высоту от начала страницы до блока на который ссылается якорь
            top = $(id).offset().top;
        
        //анимируем переход на расстояние - top за 1500 мс
        $('body,html').animate({scrollTop: top}, 1500);
    });
});