How to Ensure Smooth Anchor Jumps with Scroll-Margin-Top?

Anchoring with Precision: Maintaining Vertical Space in Anchor Jumps

When navigating web pages via anchor links, it can be frustrating to have the linked content appear abruptly at the very top of the page. This issue can be addressed by providing some vertical space above the linked content, allowing for a more seamless and controlled navigation experience.

One solution to this problem lies in utilizing the scroll-margin-top property for the element with the anchor ID. This property specifies the amount of space that should be preserved at the top of the viewport when the anchor is activated.

<code class="css">#anchor {
  scroll-margin-top: 100px;
}</code>

In this example, setting scroll-margin-top to 100px ensures that when the anchor link is clicked, the linked content appears 100 pixels below the top of the page, providing ample space for other elements such as navigation bars or header images.

This method is widely supported across modern browsers, offering a reliable solution to maintain vertical space in anchor jumps. By implementing this technique, you can enhance the user experience by allowing smooth and controlled navigation within your web pages.

The above is the detailed content of How to Ensure Smooth Anchor Jumps with Scroll-Margin-Top?. For more information, please follow other related articles on the PHP Chinese website!