Skip to content

.tip

· one of the small things

scroll-margin-top keeps anchors out from under a sticky header

A link to #deploys scrolls that heading to the very top of the viewport, which is where the sticky header sits, so the one thing the reader asked for is the one thing covered up. The offset belongs on the target, not on the link.

h2[id],
h3[id] {
  scroll-margin-top: calc(var(--header-height) + 1rem);
}

It applies to scrollIntoView() and to the scroll that follows keyboard focus as well, so every path is fixed at once. scroll-padding-top on the scrolling element does the same job from the other side.

frontend