Как сделать Плавный скроллинг при нажатии на Якорь ?
Чтобы сделать красивый, плавный скроллинг, напишем простой JavaScript код.
Библиотека JQuery
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
- Подключим библиотеку JQuery.
- Обратимся ко всем элементам содержавшим атрибут href со значением #, и навешаем событие click
- Получаем в переменную атрибут href
- Обращаемся к html и body и применяем функцию JQuery animate
- В переменную объекта 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
Смотрите видео выше и повторяйте, как там и все должно получиться. Кому была полезна эта информация буду очень благодарен если пожертвуйте на развитие сайта. Спасибо!