URI - Fragment (Ref, Reference)
About
The fragment 1) is the last part of a URI
Syntax
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.
Web
The fragment will cause the browser to scroll to the target_element
Target
When a html navigation occurs (ie the uri is clicked or fired), the fragment represent:
- an id attribute
- or a name attribute
- or a dfn element
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.
Fragment only
If the URI set in the href attribute contains only a fragment, it will cause a local scrolling
- to the top of the page with an empty value (ie #)
- to the local target otherwise
Target Pseudo-Selector
You can select all target with the :target 2) pseudo selector.
Example when using a fixed top header
:target {
scroll-margin-top: 80px;
}
Target Within Pseudo-Selector
The :target-within pseudo-class 3) applies to elements:
- for which the :target pseudo class applies
- as well as to descendant element