How to Offset HTML Anchors for a Fixed Header Using CSS and JavaScript

By the end of this page, you will understand why fixed headers overlap in-page anchors, how modern CSS solves it with scroll-margin-top, and what fallback techniques can be used when you need broader support or more control.

When you click an in-page anchor link such as #section2, the browser scrolls the target element into view. By default, it tries to align that target near the top of the viewport.

This becomes a problem when your layout includes a fixed header. A fixed header stays visible at the top of the screen, so the browser may place the target under that header instead of below it.

This is not really a bug in anchors. It is a layout issue caused by combining:

• in-page navigation
• fixed positioning
• automatic browser scrolling

Why this matters in real projects:

• Documentation pages often use anchor links.
• Landing pages use navigation links like #features or #pricing.
• Dashboards and admin panels often have sticky or fixed top bars.
• Accessibility and usability improve when the correct content is visible after navigation.

The most modern solution is CSS:

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

This tells the browser to leave extra space above the element when it is scrolled into view.

Older techniques include:

• adding top padding and negative margin
• using a ::before pseudo-element as invisible spacing
• JavaScript scrolling with a custom offset

In most modern codebases, CSS-first is the best approach because it is simpler, cleaner, and easier to maintain.

Imagine the browser is trying to place a bookmark exactly at the top edge of a window.

Now imagine you taped a solid bar across the top of that window. The bookmark is technically at the top, but you cannot see it because the bar covers it.

Offsetting an anchor means telling the browser:

"Scroll to this section, but stop a little earlier so it appears just below the fixed header."

So instead of aiming for the absolute top, you leave a small safety gap equal to the header height.

Modern CSS solution: scroll-margin-top

If the element being linked to is the anchor target, give it a top scroll margin.

<nav>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
</nav>

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

<section id="about" class="anchor-target">About section</section>
<section id="contact" class="anchor-target">Contact section</section>

.site-header {
  position: fixed;
  top: 0;
  left: ;
  : ;
  : ;
}

 {
  : ;
}

Consider this example:

<a href="#section1">Go to Section 1</a>

<section id="section1" class="anchor-target">Section 1</section>

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

Here is what happens step by step:

1. The user clicks the link Go to Section 1.
2. The browser reads href="#section1".
3. It looks for an element with id="section1".
4. It prepares to scroll that element into view.
5. Because the target has scroll-margin-top: 25px, the browser leaves 25px of space above it.
6. The section appears slightly below the top of the viewport.
7. The fixed header no longer hides the section title or content.

JavaScript trace example

const target = .();
 offset = ;
 top = target.(). + . - offset;
.({ top });

Common places this problem appears

• Single-page websites where navbar links jump to sections like About, Services, and Contact.
• Documentation sites with a table of contents linking to headings.
• FAQ pages where users jump directly to a question.
• Admin dashboards with sticky top navigation.
• Blog posts that link to headings inside the article.

Example scenarios

Product landing page

A fixed navigation bar links to #features, #testimonials, and #pricing. Without offsetting, users click a link and land on a heading that is partially hidden.

API documentation

A sidebar links to methods and endpoints. Developers need the heading and example code to be visible immediately.

Long settings page

A menu jumps to #security, #notifications, and #billing. Proper anchor offsets make navigation feel polished and predictable.

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

1. Set a shared header height variable

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

.section-anchor {
  scroll-margin-top: var(--header-height);
}

This avoids hardcoding the same number in multiple places.

2. Apply the offset only to navigable sections

Instead of applying it to every element, teams often add a class only to headings or sections that can be linked directly.

<h2 id="installation" class="section-anchor">Installation</h2>
<h2 id="usage" class="section-anchor">Usage</h2>

3. Combine with smooth scrolling

html {
  scroll-behavior: smooth;
}

This improves the user experience for anchor jumps.

4. Use JavaScript when the header height changes dynamically

For example:

1. Offsetting the wrong element

Beginners sometimes style the link instead of the target.

Broken

a {
  scroll-margin-top: 25px;
}

This usually does not help, because the browser scrolls to the element with the matching id, not the clicked link.

Correct

#contact {
  scroll-margin-top: 25px;
}

2. Forgetting that the header height may change

If your header is 25px on desktop but 60px on mobile, a fixed value may be wrong on some screens.

Better

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

@media (min-width: 768px) {
  :root {
    --header-height: 25px;
  }
}

3. Using extra empty elements unnecessarily

Older code often adds empty anchor tags only for positioning. This can clutter HTML.

scroll-margin-top vs JavaScript

/* Best modern approach */
.target {
  scroll-margin-top: 25px;
}

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

.target {
  scroll-margin-top: var(--header-height);
}

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

/* Older fallback */
.target::before {
  content: "";
  display: block;
  height: 25px;
  margin-top: -25px;
}

// JavaScript offset scroll
const target = document.querySelector('#section');
const offset = 25;
const top = target.getBoundingClientRect().top + window.pageYOffset - offset;
window.scrollTo({ top, behavior:  });

Why do fixed headers overlap anchor links?

Because the browser scrolls the target to the top of the viewport, and the fixed header sits on top of that area.

What is the best CSS way to offset an anchor?

Use scroll-margin-top on the target element. It is the cleanest modern solution.

Can I solve fixed header anchor issues without JavaScript?

Yes. In most modern projects, CSS alone is enough using scroll-margin-top or an older pseudo-element fallback.

Should I put the id on an empty anchor tag or on the heading itself?

Usually on the heading or section itself. It keeps the HTML cleaner and more semantic.

What if my header height changes on mobile?

Use a CSS variable and update it in media queries, or use JavaScript if the height changes dynamically at runtime.

Does scroll-behavior: smooth fix the overlap problem?

No. It only changes the animation of scrolling. You still need an offset solution.

When should I use JavaScript for anchor offsets?

Use it when the header height is dynamic or when you need custom scrolling behavior beyond what CSS provides.

• HTML anchors — The core mechanism behind in-page navigation using href="#id".
• CSS position: fixed — Fixed headers create the overlap problem.
• CSS position: sticky — Similar behavior can also affect scrolling and section visibility.
• CSS scroll-margin-top — The main modern solution for anchor offsets.
• CSS pseudo-elements — Useful for fallback techniques like invisible anchor spacing.
• JavaScript scrollTo() — Lets you control scroll position manually.
• DOM selection — Needed when finding target elements in JavaScript.
• Responsive design — Important when header height changes across screen sizes.