Table of Contents

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

  • 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