Table of Contents

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:

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

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: