JavaScript scrollTo() — програмна прокрутка сторінки

Метод scrollTo() прокручує сторінку до заданої точки — з плавною анімацією або миттєво.

правити

Загальний опис

Сучасна форма приймає об'єкт: scrollTo({ top: 0, behavior: 'smooth' }). Саме behavior і робить прокрутку плавною — без жодних бібліотек і анімацій вручну.

Стара форма з двома числами (scrollTo(0, 0)) теж працює, але прокручує миттєво, ривком.

Щоб прокрутити до конкретного елемента, зручніше element.scrollIntoView({ behavior: 'smooth', block: 'center' }) — не треба рахувати координати.

правити

Порада

Плавну прокрутку можна вмикати й без JavaScript: scroll-behavior: smooth у CSS діє й на якорі, і на цей метод.

автор: NagarD правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	4	12	4

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	—

Приклади

+ запропонувати свій приклад у пісочниці

<button id="top">Нагору</button>
<div style="height:150vh"></div>
<h2 id="target">Розділ</h2>

document.getElementById('top').addEventListener('click', () => {
    window.scrollTo({ top: 0, behavior: 'smooth' });
});

// до конкретного елемента — без рахування координат
document.getElementById('target').scrollIntoView({
    behavior: 'smooth',
    block: 'center',
});

// стара форма — миттєво, ривком
// window.scrollTo(0, 0);