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

Пользователь

от gage , в категории: JavaScript , 2 года назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от nicola , 2 года назад

@gage Вы можете использовать глобальный объект window и метод scrollTo на чистом 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",
});


Пользователь

от vladimir , год назад

@gage 

Для создания плавного скролла на чистом JavaScript можно использовать метод scrollIntoView() в сочетании с определенными свойствами объекта scrollBehavior.


Вот пример:


HTML:

 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>


JavaScript:

 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'
    });
  });
});


Здесь мы используем метод scrollIntoView() для прокрутки страницы до нужного элемента, и свойство behavior: 'smooth' для создания плавного эффекта. Обработчик события "click" добавляется для каждой ссылки соответственно.