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

  • 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





Discover More
Scroll Bar
Browser - Scroll

This page is scrolling in the internet context (http, html, javascript). Scrolling is implemented by the browser in response to: user interaction (scrollbar, click) or Javascript code. Via...
Oauth
Client Endpoint (Redirection URI | Redirection Endpoint | User Agent Redirection)

The client endpoint is an endpoint used by the authorization endpoint to return authorization responses containing authorization credentials to the client via the resource owner user-agent (typically a...
HTML - A element (anchor)

The a (or anchor) is a html element that represents a hyperlink. It is the cornerstone: of every navigation scheme on the web. and of the importance of a page on the internet (pagerank) the...
HTML - dfn element (Defining term)

dfn is an HTML element that locates the definition of a term and can be addressed as fragment in an URI. fragment of an URI The below phrase define the term represent. With a description list...
HTML - href (hypertext reference) attribute

href stands for hypertext reference. It forces the user agent (browser) to navigate to the resources by performing an Hypertext fetch All elements that have an href attributes are called hyperlink and...
How to create and manipulate an URL in Javascript? (Browser URL Object)

This article shows you how to get and manipulate an URL with Javascript. URL You can manipulate an URL with the URL web API object Build an URL object Print a URL properties (...host, hostname,...)...
Oauth
OAuth - Token Endpoint

The token endpoint is an authorization endpoint used by the client to obtain an access token by presenting its: authorization grant or refresh token. The token endpoint is used with every authorization...
Chrome Devtool Selector
Selector API

API A selector is a boolean expression (known also as predicate) that match against elements in a DOM tree in order to select one or several node. This API was known before as the CSS and was renamed...



Share this page:
Follow us:
Task Runner