CSS scroll-behavior — плавна прокрутка без JavaScript

CSS властивість scroll-behavior робить прокрутку плавною замість миттєвого стрибка — при переходах за якорями і викликах scrollTo().

правити

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

Один рядок замінює бібліотеку плавної прокрутки. Клік по посиланню #section більше не смикає сторінку — вона плавно доїжджає до цілі.

Працює і для програмної прокрутки: element.scrollIntoView() теж стане плавним.

правити

Порада

Обов'язково вимикай плавність для тих, кому рух неприємний: заверни правило в @media (prefers-reduced-motion: no-preference).

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

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

Синтаксис

scroll-behavior: auto | smooth;

Властивість scroll-behavior може отримувати 2 значень:

auto

Миттєвий стрибок.

автор: NagarD

правити

smooth

Плавна анімована прокрутка.

автор: NagarD

правити

Переглядачі

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

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

Переглядач
scroll-behavior	61+	36+	15.4+	48+	79+	-

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

Переглядач
scroll-behavior	61+	yes	yes	15.4+

Приклади

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

<a href="#bottom">Донизу</a>
<div style="height: 150vh"></div>
<h2 id="bottom">Ви на місці</h2>

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}