Jump links are straightforward until a position: fixed; header gets in the way. Click a link like <a href="#header-3">Jump</a> pointing to <h3 id="header-3">Header</h3>, and the fixed header at the top of the page will likely cover the very element you meant to reach. That’s the classic pain point: fixed headers hide the target of your anchor link.

In the past, developers leaned on awkward hacks to compensate, such as adding generous padding-top to in-article headers—a workaround that was more about aesthetics than correctness. The good news is there’s now a clean CSS solution that doesn’t require any of that guesswork.

h3 {
  scroll-margin-top: 5rem; /* whatever is a nice number that gets you past the header */
}

The answer is scroll-margin-top, documented in the CSS-Tricks Almanac, with browser support that’s effectively universal. It’s often mentioned alongside scroll snapping, but this jump-link use case is arguably the more everyday scenario. Here’s a simple demo showing how it works.

On a related note, Chrome’s text fragments feature handles this differently, taking you to the middle of the page instead, which can feel more natural for long-form content.