CSS Academy · Урок

scroll-behavior: smooth

Включайте плавную прокрутку для якорных ссылок и программной прокрутки с помощью scroll-behavior.

«scroll-behavior: smooth» — бесплатный урок CSS Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

Что такое scroll-behavior?

scroll-behavior определяет, должна ли прокрутка, вызванная навигацией (якорными ссылками, JavaScript scrollTo()), выполняться плавно или мгновенно переходить к нужному месту.

scroll-behavior: smooth

Установка scroll-behavior: smooth для элемента html или body делает навигацию по всем якорным ссылкам страницы плавной:

  <p>Scrolling on this page is smooth thanks to <code>html { scroll-behavior: smooth; }</code>.</p>

Мгновенная и плавная прокрутка

Значения:

auto (по умолчанию): мгновенный переход
smooth: анимированная прокрутка к цели

Навигация по якорным ссылкам

При включённой плавной прокрутке нажатие ссылки вроде <a href="#contact"> плавно прокручивает страницу к элементу с id="contact", а не мгновенно переходит к нему.

  <nav>
    <a href="#about">About</a>
    <a href="#work">Work</a>
    <a href="#contact">Contact</a>
  </nav>
  <section id="about"><h3>About</h3></section>
  <section id="work"><h3>Work</h3></section>
  <section id="contact"><h3>Contact</h3></section>

Плавный scrollTo() в JavaScript

Передайте параметр behavior со значением "smooth" методам прокрутки JavaScript, чтобы прокрутка была анимированной:

  <pre class="snippet">window.scrollTo({ top: 0, behavior: 'smooth' });

document.querySelector('#section').scrollIntoView({
  behavior: 'smooth',
  block: 'start'
});</pre>

Взаимодействие с prefers-reduced-motion

Плавная прокрутка может вызвать укачивание. Всегда отключайте её для пользователей, предпочитающих уменьшенное движение:

  <p>Respects <code>prefers-reduced-motion</code>.</p>

scroll-behavior у контейнеров

Применяйте это свойство к любому прокручиваемому контейнеру, а не только к странице:

  <div class="tabs-panel">
    <div class="tab">Tab 1</div><div class="tab">Tab 2</div><div class="tab">Tab 3</div>
  </div>

Ограничения

CSS scroll-behavior не позволяет управлять длительностью прокрутки или функцией сглаживания. Для точного управления анимацией используйте API веб-анимаций JavaScript или библиотеки вроде GSAP с их плагинами прокрутки.

scroll-padding-top для фиксированных заголовков

Если фиксированный заголовок перекрывает якорные цели, scroll-padding-top добавляет смещение, чтобы цель не скрывалась за заголовком:

  <p>Anchor targets offset by fixed header height.</p>

scroll-margin и scroll-padding

scroll-margin добавляет смещение непосредственно целевому элементу, а scroll-padding — контейнеру прокрутки. Оба свойства решают проблему фиксированного заголовка:

  <div class="section">Section content</div>

Примечание о доступности

Плавная прокрутка улучшает взаимодействие с интерфейсом. Всегда проверяйте, что навигация по якорным ссылкам работает и без неё — не полагайтесь на плавную прокрутку для функциональности, используйте её только для визуальной привлекательности.

Быстрая проверка

Как убедиться, что анимация плавной прокрутки отключена для пользователей с повышенной чувствительностью вестибулярного аппарата к движению?

Итоги

scroll-behavior: smooth у html включает плавную анимированную прокрутку для якорных ссылок и методов прокрутки JavaScript. Используйте scroll-padding-top, чтобы сместить цели прокрутки и не допустить их перекрытия фиксированными заголовками. Для доступности всегда отключайте плавную прокрутку внутри медиазапроса prefers-reduced-motion: reduce.

Часто задаваемые вопросы

Урок «scroll-behavior: smooth» бесплатный?

Да — полный текст урока «scroll-behavior: smooth» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «scroll-behavior: smooth»?

Включайте плавную прокрутку для якорных ссылок и программной прокрутки с помощью scroll-behavior. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать CSS Academy?

Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «scroll-behavior: smooth»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к CSS Academy