Плавная прокрутка сайта: CSS вместо скриптов

Как сделать плавную прокрутку страницы: свойство scroll-behavior в CSS и почему перехватывать колесо мыши скриптом — плохая идея.

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

Правильный способ: одна строка CSS

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

Переходы по якорям (<a href="#contacts">) и программная прокрутка становятся плавными, а обычная прокрутка колесом остаётся родной — быстрой и привычной. Медиазапрос отключает анимацию у тех, кто включил в системе «уменьшение движения».

Почему не стоит перехватывать колесо мыши

Раньше популярен был такой код на jQuery:

$(document).on('mousewheel', function (event) {
  var top = $(window).scrollTop() - event.originalEvent.wheelDelta;
  event.preventDefault();
  $('html, body').stop().animate({ scrollTop: top }, 200);
});

Он отменяет стандартную прокрутку и анимирует свою. На практике это:

• тормозит при быстрой прокрутке и на тачпадах;
• ломает инерционную прокрутку на ноутбуках Mac;
• не работает в части браузеров (событие mousewheel нестандартное, современное — wheel);
• раздражает пользователей, которые привыкли к своей скорости прокрутки.

Если нужен «киношный» скролл для промо-страницы, используйте проверенные библиотеки (например, Lenis), а не самописный обработчик колеса.