Справочник HTML & CSS

scroll-behavior

Происходят ли переходы к якорям и прокрутка из кода мгновенно или плавно.

Синтаксис

scroll-behavior: smooth;

Значения

Параметр	Тип	Описание
auto	keyword	Мгновенно (по умолчанию).
smooth	keyword	Плавно, с анимацией.

Примеры

Плавный переход внутри прокручиваемого блока:

<div style="height: 120px; overflow: auto; scroll-behavior: smooth; border: 1px solid gray;">
  <a href="#end">Go to the end</a>
  <p style="height: 300px;">A long block…</p>
  <p id="end">The end. <a href="#">Back to the top</a></p>
</div>

Примечания

Для всей страницы задайте его у html. Некоторых людей движение укачивает, поэтому оберните правило в @media (prefers-reduced-motion: no-preference).

См. также

scroll-margin — Дополнительное место вокруг элемента, когда страница прокручивается к нему, — чтобы он не оказался под фиксированной шапкой.
:target — Срабатывает у элемента, чей `id` совпадает с фрагментом адреса после `#`.
scroll-snap-type — Заставляет прокручиваемый контейнер останавливаться точно на дочерних элементах — для слайдеров и галерей.

Вопросы и ответы по теме

В учебнике

Прокрутка — Плавная прокрутка scroll-behavior, отступ для якоря под липкой шапкой scroll-margin-top, карусель на scroll-snap и overscroll-behavior.

Спасибо, что читаете!