How to Prevent Anchor Jumps with Fixed Headers in CSS?

Anchors Offset for Fixed Headers: A Precise Guide

When working with a fixed header on a webpage, it's common to encounter a jarring jump when navigating to anchors placed further down the page. This is because the anchor aligns to the top of the viewport, leaving the content obscured behind the header.

To alleviate this issue, we can introduce an offset to compensate for the header's height. This offset ensures that anchors are positioned at the correct location, scroll, and display content without obstruction.

HTML/CSS Solution:

A purely CSS approach is possible without the need for JavaScript. Assign a unique class to the anchor element, such as "anchor":

<a class="anchor">

Next, style the anchor using CSS to make it a block element and relatively position it with a negative top offset equal to the header's height (e.g., -250px):

a.anchor {
    display: block;
    position: relative;
    top: -250px;
    visibility: hidden;
}

This modification will vertically offset the anchor by 250px, ensuring that when it becomes active, the page scrolls to display the content at the desired location, without being hidden by the fixed header.

The above is the detailed content of How to Prevent Anchor Jumps with Fixed Headers in CSS?. For more information, please follow other related articles on the PHP Chinese website!