scroll-behavior: плавность программной и якорной прокрутки
scroll-behavior задаёт плавную или немедленную прокрутку для поддерживаемых навигационных и программных переходов.
Назначение
scroll-behavior задаёт плавную или немедленную прокрутку для поддерживаемых навигационных и программных переходов.
Как это работает
smooth не задаёт точную длительность: её выбирает браузер. Свойство не превращает каждое движение колеса в анимацию. Для прокрутки viewport обычно задают правило на корневом элементе.
Пример
<style>
.reader{height:150px;overflow:auto;scroll-behavior:smooth;border:1px solid;padding:12px}.space{height:220px}@media(prefers-reduced-motion:reduce){.reader{scroll-behavior:auto}}
</style>
<div class="reader"><a href="#end">К результату</a><div class="space"></div><p id="end">Результат</p><div class="space"></div></div>Что должно получиться
Ссылка прокручивает внутреннюю область к результату, плавно при обычных настройках. Браузер вправе не анимировать прокрутку; доступность цели не должна зависеть от эффекта.
Граница применения и частая ошибка
Плавное движение может мешать пользователю с чувствительностью к анимации. Добавьте вариант auto при prefers-reduced-motion и не заставляйте ждать анимацию для доступа к действию.
Самостоятельная проверка
Проверьте якорный переход с smooth и auto, затем измените системную настройку движения. Убедитесь, что целевой заголовок остаётся видимым при любом варианте.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.