When it is necessary to use anchors to navigate within a page, we often run into a problem: the header.

If this element has a position: fixed, it will most likely cover part of the content.

Both the "classic" anchors and the scrollIntoView function, in fact, do not allow to set a top margin, so it was necessary to resort to small hacks in CSS, or change strategy completely and use JS in a more elaborate way.

Fortunately, the scroll-margin-top property allows us precisely to specify a margin in CSS that is used exclusively for scrolling.