Плавная прокрутка якорной ссылки
Что такое якорные ссылки и для чего они нужны?
Якорные ссылки помогут направить посетителей в нужный раздел сайта.
Когда посетитель сайта нажимает на элемент, к которому добавлена ссылка на якорь, он автоматически переносится в ту часть страницы, где был добавлен якорь.
Якорь позволяет вам добавить невидимую отметку, которую вы можете разместить в любом месте на сайте.
Как создать якорную ссылку?
Задаем ссылке через хэштег ссылку такого вида
<ul class="link_box">
<li><a href="#link">Ссылка</a></li>
<li><a href="#link2">Ссылка</a></li>
<li><a href="#link3">Ссылка</a></li>
<li><a href="#link4">Ссылка</a></li>
</ul>Затем, необходимо разделу или блоку до которого надо прокрутить добавляем
id с таким же именем, как href у ссылки, только уже без хэштега. Каждый id должен соответствовать своей ссылке.<div id="link">Раздел</div>
<div id="link2">Раздел</div>
<div id="link3">Раздел</div>
<div id="link4">Раздел</div>Как сделать плавную прокрутку якоря на чистом JS?
В файл с Вашими скриптами добавляем следующий код
const anchors = document.querySelectorAll('.link_box a[href*="#"]')
for (let anchor of anchors) {
anchor.addEventListener('click', function (e) {
e.preventDefault()
const blockID = anchor.getAttribute('href').substr(1)
document.getElementById(blockID).scrollIntoView({
behavior: 'smooth',
block: 'start'
})
})
}