---
title: "Two lines so anchor links don't hide under your header"
description: "Smooth in-page scrolling plus scroll-margin-top, so jumping to a heading lands it below your sticky header instead of tucked behind it. The fix everyone forgets until a link feels broken."
date: "2026-04-02"
tags: ["css", "ux", "accessibility"]
---

You add a sticky header, ship some in-page anchor links, and a week later
someone reports that clicking a link "scrolls to the wrong place." It doesn't,
really. The browser scrolls the target to the very top of the viewport, which is
exactly where your sticky header is sitting. The heading ends up tucked behind
it.

Two short rules fix it:

```css
html {
  scroll-behavior: smooth;
}

[id] {
  scroll-margin-top: 60px;
}
```

Toggle the offset below and click the links. With it off, every heading lands
under the bar:

## What each line does

`scroll-behavior: smooth` on the root makes anchor jumps animate instead of
teleport. Small thing, but it tells the eye where it just went.

`scroll-margin-top` is the real fix. It reserves space at the top of an element
*for scrolling purposes only*, so when the browser scrolls that element into
view it stops short by that much. Set it to your header height (a bit more if
you want breathing room) and the heading clears the bar every time. The `[id]`
selector applies it to anything you can link to, so you don't have to remember
per heading. It also kicks in for keyboard focus and the browser's
find-on-page, not just clicks.

## A couple of notes

Respect motion preferences. Wrap the smooth scroll so people who've asked for
less motion don't get it:

```css
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
```

And if your header height changes (taller on mobile, say), drive the offset off
a variable instead of hard-coding `60px`:

```css
:root { --header: 56px; }
[id] { scroll-margin-top: calc(var(--header) + 8px); }
```

That's the whole thing. It's the kind of fix nobody notices when it's there, and
everybody notices when it's missing.