scroll-behavior

Управляет плавностью прокрутки при навигации по якорным ссылкам и программном скролле.

Зачем нужно

Одна строка CSS заменяет JS-библиотеки для плавного скролла. Работает с якорными ссылками (#section) и scrollIntoView.

Где используется

  • Навигация по секциям одностраничника
  • «Наверх» кнопка с плавным скроллом
  • Оглавления с якорными ссылками

Code example

/* Глобальный плавный скролл */
html {
  scroll-behavior: smooth;
}

/* Только для конкретного контейнера */
.sidebar-nav {
  scroll-behavior: smooth;
  overflow-y: auto;
  max-height: 80vh;
}

/* Учёт фиксированного хедера */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* высота фиксированного хедера */
}

<!-- Якорная навигация — скролл автоматически плавный -->
<nav>
  <a href="#about">О нас</a>
  <a href="#contacts">Контакты</a>
</nav>

<section id="about">...</section>
<section id="contacts">...</section>

/* Отключение для пользователей с настройкой reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

Связанные темы

Ресурсы