/
Вопросы и ответы
/
JavaScript
/

Как сделать плавный скролл js

Как сделать плавный скролл js

4 года назад

Человек-Молекула

Ответы

0

Существуют встроенные методы чтобы добиться плавного скролла. Один из них - scrollTo() и его свойство behavior: "smooth"

window.scrollTo({
  top: 1000, // установим скроллл  на величину 1000px
  behavior: "smooth" // используем плавный скролл
});

Чтобы избежать ручного ввода для величины смещения, вычислим их автоматически:

const navElements = document.querySelectorAll('a[href^="#"]');

navElements.forEach((link) => {
  link.addEventListener('click', function (e) {
    e.preventDefault();
    const id = link.getAttribute('href');
    const target = document.querySelector(id);
    const offsetTop = target.getBoundingClientRect().top + window.pageYOffset;

    window.scrollTo({
      top: offsetTop,
      behavior: "smooth"
    });
  });
});

Другие варианты: scrollIntoView(), scrollBy.

2 года назад

Aleksey