Плавне прокручування (скроллінг) до якоря за допомогою 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 – час прокрутки в мілісекундах