URI - Fragment (Ref, Reference)

About

The fragment ¹⁾ is the last part of a URI

An URI has the following syntax with the #fragment being the fragment

[scheme:][//authority][path][?query][#fragment]

The value of the fragment must be encoded.

The fragment will cause the browser to scroll to the target_element

When a html navigation occurs (ie the uri is clicked or fired), the fragment represent:

Example with a anchor name

<a name="smtpd_client_restrictions">smtpd_client_restrictions</a>

If you add a target element dynamically manipulating the DOM, you need to add them with the DOMContentLoaded event as the scroll will occur after.

If the URI set in the href attribute contains only a fragment, it will cause a local scrolling

You can select all target with the :target ²⁾ pseudo selector.

Example when using a fixed top header

:target {
  scroll-margin-top: 80px;
}

The :target-within pseudo-class ³⁾ applies to elements:

¹⁾

²⁾

³⁾