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

Многие задаются вопросом как сделать ссылку-якорь, а так же применить к ней плавную прокрутку при клике по ней к блоку? Решение очень простое. Для этого вам понадобится подключение библиотеки jQuery и несколько действий для полного функционала этой идеи.

1. Создаем меню с якорными ссылками
<nav class="menu">
    <ul>
        <li><a href="#menu1">Ссылка на якорь 1</a></li>
        <li><a href="#menu2">Ссылка на якорь 2</a></li>
        <li><a href="#menu3">Ссылка на якорь 3</a></li>
        <li><a href="#menu4">Ссылка на якорь 4</a></li>
    </ul>
</nav>


2. Подключаем библиотеку jQuery. Пропишите перед закрывающим тегом </body>
<script type="text/jаvascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

3. Анимируем наши якорные ссылки
<script type="text/jаvascript">
 $(document).ready(function(){
    $(".menu").on("click","a", function (event) {
        event.preventDefault();
        var id  = $(this).attr('href'),
            top = $(id).offset().top;
        $('body,html').animate({scrollTop: top}, 1500);
    });
});
</script>

4. Добавляем нашим блокам к которым нужны опустится id
<div id="menu1">Text info</div>
Добавить комментарий

Оставить комментарий

Кликните на изображение чтобы обновить код, если он неразборчив