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

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

правити

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

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

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

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

правити

Порада

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

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

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

Переглядачі

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

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

Переглядач
scrollTo	61+	36+	15.4+	48+	79+	9+

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

Переглядач
scrollTo	61+	yes	yes	15.4+

Приклади

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

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