How to Offset HTML Anchors for a Fixed Header

By the end of this page, you will understand why fixed headers can cover anchor targets, and how to fix that using modern CSS such as scroll-margin-top, older CSS workarounds, and JavaScript when needed.

In-page anchors let users jump to a specific part of a page using a URL fragment such as #contact or #pricing.

For example:

<a href="#contact">Go to Contact</a>

<section id="contact">
  <h2>Contact</h2>
</section>

When the link is clicked, the browser scrolls the element with id="contact" into view. The problem is that browsers typically align that target near the top of the viewport.

If your layout has a fixed header, that header stays pinned to the top while the page scrolls. This means the browser may correctly scroll to the anchor, but the visible content can still be hidden underneath the header.

This matters in real projects because fixed navigation bars are common in:

• documentation sites
• landing pages
• dashboards
• single-page websites
• long articles with table-of-contents links

A good anchor offset improves usability, accessibility, and navigation. Users should land on the section heading itself, not on a position where the heading is blocked.

Think of an anchor jump like placing a sticky note at the top edge of a window.

The browser says, "Put this section at the top."

But your fixed header is like a strip of cardboard taped across the top of that window. The section still reaches the top, but part of it is hidden behind the cardboard.

Offsetting the anchor means telling the browser:

"Stop scrolling a little earlier so the section appears just below the fixed header."

So instead of aiming for the absolute top of the page, you aim for top minus header height.

The best modern CSS solution is usually scroll-margin-top.

Modern CSS solution

<nav class="header">
  <a href="#about">About</a>
</nav>

<section id="about" class="anchor-section">
  <h2>About</h2>
  <p>This section will not hide behind the fixed header.</p>
</section>

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 25px;
}

.anchor-section {
  scroll-margin-top: 25px;
}

What this does

Consider this example:

<a href="#team">Team</a>

<header class="header">My Header</header>

<section id="team" class="anchor-section">
  <h2>Team</h2>
  <p>Meet the team.</p>
</section>

.header {
  position: fixed;
  top: 0;
  height: 25px;
}

.anchor-section {
  scroll-margin-top: 25px;
}

Here is what happens step by step:

1. The user clicks the link with href="#team".
2. The browser looks for the element with id="team".
3. The browser starts scrolling that element into view.

This pattern appears in many common interfaces.

Documentation pages

A table of contents links to sections like #installation or #api, while a fixed top navigation bar remains visible.

Marketing or landing pages

Buttons like "Features", "Pricing", and "Contact" jump to sections on the same page.

Admin dashboards

A fixed app header or toolbar can overlap section headings when navigating within long settings pages.

Help centers and FAQs

Users click question links and should land with the full heading visible.

Single-page portfolios

Navigation links jump to About, Projects, and Contact sections while the header stays fixed for easy navigation.

In real projects, developers usually solve this in one of these ways:

1. Use CSS on anchor targets

A common pattern is to apply scroll-margin-top to headings or sections that may be linked to.

section[id],
h2[id],
h3[id] {
  scroll-margin-top: 64px;
}

This works well in documentation sites and component libraries.

2. Use a CSS custom property for header height

This makes maintenance easier.

:root {
  --header-height: 25px;
}

.header {
  height: var(--header-height);
}

[id] {
  scroll-margin-top: var(--header-height);
}

If the header height changes, you update it in one place.

3. Combine with smooth scrolling

html {
  scroll-behavior: smooth;
}

This improves the user experience without JavaScript.

4. Use JavaScript for dynamic layouts

1. Forgetting that the header height may change

A hard-coded 25px works only if the header is always exactly 25px tall.

Better:

:root {
  --header-height: 25px;
}

[id] {
  scroll-margin-top: var(--header-height);
}

2. Applying the offset to the wrong element

Broken approach:

.header {
  scroll-margin-top: 25px;
}

This does nothing for anchor targets because the offset belongs on the element being scrolled to, not on the fixed header.

3. Using extra empty elements unnecessarily

Older solutions often inserted hidden anchor elements just to create spacing. This works, but it makes HTML harder to maintain.

Prefer modern CSS when possible.

4. Forgetting browser behavior with JavaScript links

Broken code:

link.addEventListener('click', () => {
  window.scrollTo({ top: 100 });
});

CSS vs JavaScript

/* Fixed header */
.header {
  position: fixed;
  top: 0;
  height: 25px;
}

/* Best modern fix */
[id] {
  scroll-margin-top: 25px;
}

/* Optional smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Reusable with a variable */
:root {
  --header-height: 25px;
}

[id] {
  scroll-margin-top: var(--header-height);
}

/* Older workaround */
.offset-anchor {
  padding-top: 25px;
  margin-top: -25px;
}

/* JavaScript manual offset */
const headerOffset = 25;
const elementTop = target.getBoundingClientRect().top + window.;
.({ : elementTop - headerOffset, :  });

How do I stop a fixed header from covering anchor links?

Use scroll-margin-top on the target element, with a value equal to the fixed header height.

Is there a pure CSS way to offset anchor scrolling?

Yes. The preferred modern solution is scroll-margin-top. An older workaround is padding-top with a matching negative margin-top.

Should I use JavaScript to offset anchors?

Only if CSS is not enough, such as when the header height changes dynamically or you need custom scrolling behavior.

What is the difference between scroll-margin-top and margin-top?

margin-top changes layout spacing. scroll-margin-top changes where the browser positions an element during scrolling.

Can I apply anchor offset to all elements with IDs?

Yes, many projects use:

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

But make sure that broad rule does not affect elements you do not want to target.

Does smooth scrolling fix the overlap problem?

No. Smooth scrolling changes the animation, not the final position. You still need an offset solution.

• HTML anchor links — The basic mechanism behind jumping to #section on the same page.
• CSS position: fixed — Fixed headers cause the overlap problem in the first place.
• CSS scroll-margin-top — The main modern property used to solve this issue.
• CSS scroll-behavior — Often used with anchor links to add smooth scrolling.
• JavaScript scrollTo() — Useful when you need manual control over scroll position.
• Responsive design — Important when header height changes across screen sizes.
• DOM selection — Needed in JavaScript solutions to find anchor targets.
• Layout spacing with margin and padding — Helps understand older CSS offset tricks.