Плавне прокручування (скроллінг) до якоря за допомогою JavaScript

Плавне прокручування (скроллінг) – це популярна функція веб-дизайну, яка покращує взаємодію користувача, забезпечуючи плавну навігацію між розділами веб-сторінки. Замість різких стрибків, плавне прокручування створює плавний перехід, роблячи взаємодію більш природною та візуально привабливою.

Цей метод особливо поширений на лендінгах, де навігаційні посилання часто вказують на різні розділи однієї сторінки. Плавне прокручування допомагає користувачеві більш захопливо орієнтуватися в контенті, покращуючи читабельність та загальну зручність використання. Його часто використовують у меню, кнопках «прокрутити вгору» та посиланнях-якорях на довгих сторінках.

З технічної точки зору, реалізація плавного прокручування за допомогою JavaScript досить проста. Сучасні браузери вже забезпечують вбудовану підтримку плавного прокручування, що означає, що ви можете досягти ефекту з мінімальним кодом. Водночас ви можете налаштувати логіку прокручування, якщо вам потрібен більший контроль над швидкістю, зміщенням або анімацією.

У цій статті ми розглянемо простий спосіб реалізації плавного прокручування за допомогою JavaScript, що робить навігацію вашим веб-сайтом чистою та легкою.

HTML

<ul class="nav-block">
  <li><a href="#first">First block</a></li>
  <li><a href="#second">Second block</a></li>
  <li><a href="#third">Third block</a></li>
  <li><a href="#fourth">Fourth block</a></li>
</ul>

Атрибут id використовується для позначення якоря. Наприклад:

<div id="first">
Some your content...
</div>

JavaScript

const els = document.querySelectorAll('.nav-block a');

els.forEach((el) => {

  el.addEventListener('click', (ev) => {
    ev.preventDefault();

    const id = el.getAttribute('href').slice(1);
    const block = document.getElementById(id);

    if (block) {
      window.scrollTo({
        top: block.offsetTop,
        behavior: 'smooth',
      });
    }
  });
});

Якщо ви використовуєте jQuery у своєму проекті, ви можете написати майже те саме, використовуючи цю JavaScript бібліотеку.

jQuery

$('.nav-block a').on('click', function(ev) {
    ev.preventDefault();
  
    const id  = $(this).attr('href');
    const top = $(id).offset().top;
  
    $('body,html').stop().animate({scrollTop: top}, 1000);
});

1000 – час прокрутки в мілісекундах