Share this post on:

Как сделать Плавный скроллинг при нажатии на Якорь ?

Чтобы сделать красивый, плавный скроллинг, напишем простой JavaScript код.

Библиотека JQuery

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  1. Подключим библиотеку JQuery.
  2. Обратимся ко всем элементам содержавшим атрибут href со значением #, и навешаем событие click
  3. Получаем в переменную атрибут href
  4. Обращаемся к html и body и применяем функцию JQuery animate
  5. В переменную объекта scrollTop присваиваем значение координат якоря

Смотрите код и пример ниже.

$('a[href^="#"]').click(function(){ 
   let anchor = $(this).attr('href');  
   $('html, body').animate({           
   scrollTop:  $(anchor).offset().top  
   }, 600);                            
});

Пример: https://sashad.ru/2022/scrolling/scrolling.php

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

Share this post on:

Leave a Comment

Ваш адрес email не будет опубликован.