Плавная прокрутка к элементу

Допустим есть якорная ссылка.

<a href="#about">О сайта</a>

При нажатии на якорную ссылку, браузер сразу переходит к блоку, у которого атрибут id равен «about» (по коду выше).

Чтобы браузер плавно переходил к нужному элементу, ему надо задать параметр scroll-behavior: smooth.

html {
  scroll-behavior: smooth;
}

Пример кода:

Также можно задать отступ сверху через свойство scroll-padding-top.