How to Offset Anchor Links from the Top of the Viewport?

Anchor Link with Offset from Top

When navigating a webpage via anchor links, the target section often lands directly at the top of the viewport. To provide some breathing room, it's desirable to offset the linked area slightly from the page's edge.

Solution

The scroll-margin-top property offers a straightforward solution. By adding a value to this property for the anchor, you can create a gap between its linked position and the page's top edge. For instance:

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

This code would shift the target section 100px down from the top when navigating via the anchor link.

Compatibility

Fortunately, this solution is widely supported by modern browsers, including Chrome, Firefox, Safari, and Edge. Its compatibility with older browsers like Internet Explorer, however, is limited.

The above is the detailed content of How to Offset Anchor Links from the Top of the Viewport?. For more information, please follow other related articles on the PHP Chinese website!