Переход по внутренней ссылке на странице — например, из оглавления к нужному разделу — по умолчанию происходит мгновенно, скачком. Свойство scroll-behavior со значением smooth меняет это поведение на плавную прокрутку, и происходит это буквально одной строчкой CSS без всякого JavaScript.
Достаточно применить это свойство к html или конкретному прокручиваемому контейнеру, и все переходы по якорным ссылкам внутри него станут плавными. Это особенно приятно ощущается на длинных страницах с оглавлением или при переходе к форме обратной связи внизу страницы.
Важно, что scroll-behavior влияет только на программную и якорную прокрутку, но не на обычную прокрутку колёсиком мыши или пальцем на сенсорном экране — эти жесты остаются привычными и мгновенными, что и правильно, потому что искусственное замедление обычной прокрутки скорее раздражает пользователей.
Для более тонкого контроля над плавной прокруткой существует scroll-snap — он заставляет прокрутку останавливаться на определённых точках, что удобно для галерей изображений или карусели, где логично, чтобы прокрутка останавливалась ровно на каждом отдельном слайде, а не между ними.
Как и с любой анимацией, стоит помнить про пользователей с включённым уменьшением движения в системных настройках — для них разумнее показывать плавную прокрутку менее выраженной или вовсе мгновенной, ориентируясь на тот же медиазапрос prefers-reduced-motion.
Плавная прокрутка — один из тех редких случаев, где заметный эффект достигается практически бесплатно, без ущерба для производительности и без единой строчки скриптов, что делает её очень удобным первым шагом в знакомстве с CSS-анимацией.
Подробнее о свойстве и его границах применения рассказано в статье про scroll-behavior на MDN.
