Fixed Headers and Jump Links? The Solution is scroll-margin-top

Encountering a frustrating issue? Jump links, like [Jump](#header-3), leading to headers (e.g., ### Header) are often obscured by fixed position headers at the top of the page. This common problem leaves the target header hidden.

Previously, resolving this required cumbersome workarounds. Even on CSS-Tricks, generous padding-top on in-article headers was often the easiest solution.

Fortunately, a simple CSS solution now exists:

h3 {
  scroll-margin-top: 5rem; /* Adjust '5rem' as needed to clear the header */
}

The scroll-margin-top property elegantly pushes the header down, ensuring it remains visible even with a fixed header above. Browser support is excellent, making this a practical and widely compatible solution. While often discussed alongside scroll snapping, its utility in this context is arguably even more significant.

A simple demonstration showcases its effectiveness.

Interestingly, Chrome's "text fragments" links, while offering a different approach, often position the user in the middle of the page, providing an alternative solution to this common problem.

The above is the detailed content of Fixed Headers and Jump Links? The Solution is scroll-margin-top. For more information, please follow other related articles on the PHP Chinese website!