How Can I Add a Vertical Offset to Anchor Links?

Moving Anchor Links with Vertical Offset

When using anchor links within a webpage, by default, upon clicking an anchor link, it brings you to a specific section where the linked area is positioned at the very top of the display. This behavior may not always be desirable, especially if you would like to maintain some space at the top before reaching the linked or targeted section.

To achieve this desired behavior, the scroll-margin-top property can be utilized. By applying a specific pixel value to this property, you can create a vertical offset.

Code:

In this example, "#anchor" represents the element's ID assigned to the linked content, and "100px" indicates the desired vertical space. By setting this property, you ensure that when the anchor link is clicked, the browser will scroll down to the linked content but leave 100 pixels of space at the top. This provides a more controlled and user-friendly scrolling experience.

This approach works across various browsers, including the latest versions, making it a reliable solution for controlling anchor link behavior on modern web pages.

The above is the detailed content of How Can I Add a Vertical Offset to Anchor Links?. For more information, please follow other related articles on the PHP Chinese website!