Как сделать плавный скролл на чистом JavaScript?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// Плавный скролл в самый низ страницы
window.scrollTo({
  top: document.body.scrollHeight,
  behavior: "smooth",
});

// Плавный скролл в самый верх страницы
window.scrollTo({
  top: 0,
  behavior: "smooth",
});

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

<a href="#section-1" class="smooth-scroll">Перейти к разделу 1</a>
<a href="#section-2" class="smooth-scroll">Перейти к разделу 2</a>
<a href="#section-3" class="smooth-scroll">Перейти к разделу 3</a>

<div id="section-1">
  <h2>Раздел 1</h2>
  <p>Текст раздела 1</p>
</div>

<div id="section-2">
  <h2>Раздел 2</h2>
  <p>Текст раздела 2</p>
</div>

<div id="section-3">
  <h2>Раздел 3</h2>
  <p>Текст раздела 3</p>
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

// Найти все элементы со ссылками, имеющие класс "smooth-scroll"
const links = document.querySelectorAll('.smooth-scroll');

// Для каждой ссылки добавить обработчик события "click"
links.forEach(link => {
  link.addEventListener('click', e => {
    // Отменить стандартное поведение ссылки
    e.preventDefault();

    // Получить id элемента, к которому нужно прокрутить страницу
    const href = link.getAttribute('href');
    const target = document.querySelector(href);

    // Прокрутить страницу до нужного элемента
    target.scrollIntoView({
      behavior: 'smooth'
    });
  });
});