Смещение якорей через scroll-margin-top!

Когда на странице есть position: sticky фиксированная шапка, переход по якорю почти всегда ломается.

Контент прокручивается, но заголовок уезжает под хедер:
<a href="#section">Перейти</a><h2 id="section">Раздел</h2>

По умолчанию браузер скроллит элемент ровно к верху вьюпорта, не зная про фиксированную шапку.

Решение есть нативное и очень простое, добавить отступ для скролла самому элементу:
h2 {
scroll-margin-top: 72px;
}

Теперь при переходе по якорю браузер автоматически остановится ниже, с учётом высоты шапки.

Если высота шапки задана переменной, можно так:
:root {
--header-h: 72px;
}

h2 {
scroll-margin-top: var(--header-h);
}

Это работает для якорных ссылок, scrollIntoView(), навигации по оглавлению, документации и лонгридов.

Code Ready | #совет