ГлавнаяHTML/CSS → Плавная прокрутка якорной ссылки
HTML/CSS

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

Плавная прокрутка якорной ссылки
HTML/CSS
Подпишись на нас в телеграм @coderoll

Что такое якорные ссылки и для чего они нужны?

Якорные ссылки помогут направить посетителей  в нужный раздел сайта.

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

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

Как создать якорную ссылку?

Задаем ссылке через хэштег ссылку такого вида
<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'
    })
  })
}
Добавить комментарий
Кликните на изображение чтобы обновить код, если он неразборчив