Плавная прокрутка – это популярная функция на веб-сайтах, которая обеспечивает плавный переход к разделам страницы при клике на якорные ссылки. Эта статья расскажет о том, как реализовать плавную прокрутку с помощью JavaScript.

Что такое якорные ссылки

Якорные ссылки – это гиперссылки на той же странице, которые ведут к определенному разделу или элементу. Обычно они используются для улучшения навигации на странице.

Пример якорных ссылок.

HTML-код раздела на странице:

<div id="section1">
  <h2>Раздел 1</h2>
  <p>Содержание раздела 1 здесь.</p>
</div>

<div id="section2">
  <h2>Раздел 2</h2>
  <p>Содержание раздела 2 здесь.</p>
</div>

Теперь создадим якорные ссылки, чтобы перейти к этим разделам:

<a href="#section1">Перейти к разделу 1</a>
<a href="#section2">Перейти к разделу 2</a>

Принципы работы плавного скролла

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

Вот пример базового скрипта для реализации плавной прокрутки:

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

Объяснение кода:

Выборка элементов: document.querySelectorAll(‘a[href^=»#»]’) выбирает все ссылки, href которых начинается с #.
Добавление обработчика событий: addEventListener применяется к каждой найденной ссылке для обработки клика.
Отмена стандартного поведения: e.preventDefault() предотвращает стандартное поведение ссылки (переход к якорю без анимации).
Плавная прокрутка: scrollIntoView({ behavior: ‘smooth’ }) плавно прокручивает страницу к выбранному элементу.