scroll-margin-top: зазор у цели якорного перехода
scroll-margin-top добавляет верхний отступ к области элемента, учитываемой при некоторых операциях прокрутки к нему.
Назначение
scroll-margin-top добавляет верхний отступ к области элемента, учитываемой при некоторых операциях прокрутки к нему.
Как это работает
Свойство удобно для заголовков, которые при якорном переходе могут оказаться под закреплённой шапкой. Это не обычный margin и не постоянный пустой блок в раскладке.
Пример
<style>
.target{scroll-margin-top:5rem}.spacer{height:220px}
</style>
<a href="#target">К нижнему разделу</a><div class="spacer"></div><h2 class="target" id="target">Целевой заголовок</h2><p>Продолжение раздела.</p>Что должно получиться
Якорь ведёт к заголовку с дополнительной областью сверху. Видимый эффект зависит от доступного диапазона прокрутки: у самого конца короткой страницы места может не хватить.
Граница применения и частая ошибка
Не задавайте произвольный огромный отступ, скрывающий ошибку компоновки. Соотносите значение с реальной высотой шапки и проверяйте увеличение текста и узкий экран.
Самостоятельная проверка
В отдельной странице добавьте sticky-шапку и ссылку на нижний заголовок. Проверьте видимость его первой строки после перехода при нескольких ширинах окна.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.