scroll-margin
Extra space kept around an element when the page scrolls to it — so it does not end up under a fixed header.
Syntax
scroll-margin-top: value;Values
| Parameter | Type | Description |
|---|---|---|
| length | length | The space: `scroll-margin-top: 80px`. |
| scroll-padding | property | The same, but set once on the scrolling container. |
Examples
The heading stops below the sticky header:
<div style="height: 140px; overflow: auto; border: 1px solid gray;">
<div style="position: sticky; top: 0; background: gold; padding: 6px;">Sticky header — <a href="#part">Go to Part 2</a></div>
<p style="height: 200px;">Part 1…</p>
<h4 id="part" style="scroll-margin-top: 40px;">Part 2 is not hidden under the header</h4>
<p style="height: 200px;">…</p>
</div>Notes
With a fixed site header, scroll-padding-top on html equal to the header height fixes every anchor link at once.
See also
- scroll-behavior — Whether jumps to anchors and scrolling from code happen instantly or smoothly.
- :target — Matches the element whose `id` equals the fragment in the address after `#`.
- position — How an element is positioned: in the normal flow or by offsets.
Related recipes
In the tutorial
- Scrolling — Smooth scrolling with scroll-behavior, scroll-margin-top for anchors under a sticky header, a scroll-snap carousel and overscroll-behavior.