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

Существуют встроенные методы чтобы добиться плавного скролла. Один из них - 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.