Entry 04

Anchor targets that clear a sticky header

Use it on any page with in-page links and a fixed or sticky header.

Click each link. The section heading lands just below the header, never under it.

Code CSS · 5 lines

html { scroll-padding-block-start: 5rem; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

Why it works, the rules and the credits 1 reason · 2 rules · support · credits

The browser offsets every scroll to an anchor by the padding, so the target lands below the header. No script calculates offsets.

Keep the offset outside the motion query, so people who ask for reduced motion still get it.
Tie the value to the header's height. Share one custom property between the two.

Borrowed from: Kevin Powell, Stop fixed navigations covering content on scroll, 2022-06-02, and Use these CSS features instead of JavaScript, 2026-09-23