🚀 Сделайте ваш сайт живым: магия `scroll-behavior: smooth`

Вы когда-нибудь нажимали на якорную ссылку (например, «Вернуться к началу») и мгновенно «телепортировались» в другую часть страницы? Это быстро, но очень дезориентирует. Пользователь теряет контекст и не понимает, что произошло.

К счастью, есть невероятно простое и элегантное решение, которое сделает ваш сайт более профессиональным и приятным для использования.

Имя этому решению — scroll-behavior: smooth.

🤔 Что это такое и как это работает?

scroll-behavior — это CSS-свойство, которое определяет, как будет вести себя прокрутка при навигации по якорным ссылкам или при управлении скроллом через JavaScript.

По умолчанию его значение — auto, что означает мгновенный «прыжок» к нужному месту. Но если вы установите значение smooth, браузер сам анимирует прокрутку, создавая плавный и естественный переход.

🪄 Как это использовать?

Проще не придумаешь. Просто добавьте одну строчку в ваш CSS-файл:

html {
  scroll-behavior: smooth;
}

И всё! Теперь любая навигация по якорным ссылкам на вашем сайте будет плавной.

Пример

Представьте, у вас есть такая разметка:

HTML

<nav>
  <a href="#section-1">Раздел 1</a>
  <a href="#section-2">Раздел 2</a>
</nav>
 
<div id="section-1" style="height: 100vh; background: #f0f0f0;">
  <h2>Это первый раздел</h2>
</div>
<div id="section-2" style="height: 100vh; background: #e0e0e0;">
  <h2>Это второй раздел</h2>
</div>

Без scroll-behavior: smooth клик по ссылке «Раздел 2» мгновенно переместит вас ко второму блоку. С этим свойством браузер плавно прокрутит страницу вниз.

✅ Почему это важно?

Улучшение пользовательского опыта (UX). Плавная прокрутка помогает пользователю сохранить контекст. Он видит, куда его перемещает страница, и не чувствует себя потерянным.
Ощущение «живого» интерфейса. Анимации и плавные переходы делают сайт более современным и отзывчивым. Это та самая «магия», которая отличает хороший сайт от великолепного.
Никакого JavaScript. Раньше для такого эффекта приходилось писать несколько строк на JavaScript. Теперь же это нативная возможность браузера, которая работает быстро и не требует лишних ресурсов.
Это невероятно просто. Одна строчка кода, которая ничего не ломает, а только улучшает.

🏁 Вывод

В современной веб-разработке дьявол кроется в деталях. scroll-behavior: smooth — это одна из тех деталей, которая не стоит вам почти никаких усилий, но приносит огромную пользу.