---
title: "Anchor targets that clear a sticky header"
description: "Use it on any page with in-page links and a fixed or sticky header."
canonical: https://good-css.com/anchor-targets-that-clear-a-sticky-header.md
last-updated: 2026-11-05
---

# Anchor targets that clear a sticky header

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

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

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

Why it works:

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

Rules:

- 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.

Support: Chrome 69, Firefox 68, Safari 14.1.

- Borrowed from: Kevin Powell, [Stop fixed navigations covering content on scroll](https://www.youtube.com/watch?v=iGUSTyG-CYw), 2022-06-02, and [Use these CSS features instead of JavaScript](https://www.youtube.com/watch?v=qu1jE41O_8o), 2026-09-23