When you click an anchor link, the browser scrolls the target element to the very top of the viewport. If your site has a sticky header, the header will overlap the content. scroll-margin-top fixes this with a single line of CSS.

The Fix

{
  scroll-margin-top: 4rem;
}

Apply this to any element that is used as an anchor target. The browser will leave 4rem of space above the element when scrolling to it.

Practical Example

If your sticky header is 80px tall, set the offset slightly above that:

/* Apply to all anchor targets */
section[id], div[id], h2[id], h3[id] {
  scroll-margin-top: 5rem;
}

/* Or target a specific section */
#about {
  scroll-margin-top: 100px;
}

Table of Contents Alternative

If you are not using a table of contents plugin, add this CSS globally to your site to cover all anchor targets at once:

[id] {
  scroll-margin-top: 4rem;
}

Pro Tips

• Use rem units so the offset scales with your root font size.
• If your header height changes on mobile, use a media query to adjust the value.
• This property is supported in all modern browsers.
• Works with smooth scrolling — add scroll-behavior: smooth to html for a polished effect.