Home > Web Front-end > CSS Tutorial > How to Ensure Smooth Anchor Jumps with Scroll-Margin-Top?

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

Susan Sarandon
Release: 2024-11-06 19:46:02
Original
312 people have browsed it

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>
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template