You probably have used fragments in links to point a link to a part of your page such as a heading. This technique is used in table of content for example and it's a common pattern.
Background
To extend the current support for scrolling to an anchor element in a page, the W3C have proposed a solution which basically adds the ability to link to a DOM element with id, or textual content on a page to make it easier for browsers to understand what the users are interested and scroll there when they visit the page. In addition to make it visually easier to follow, they have added the highlight to the text so that users will know where to look at on first sight.
Scroll to Text Fragment
So that's how Scroll to Text Fragment was born. It has been shipped to Chrome and Microsoft Edge called Scroll to Text Fragment which allows you to link to a specific text on a page, using a fragment provided in the URL. When the page is loaded, the browser highlights the text and scrolls it into view.
This is the generic syntax:
#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
context |-------match-----| context
๐ก Square brackets indicate an optional parameter.
Here is an example:
<a href="https://yashints.dev/#:~:text=Meet&text=Yas">
Click to go to a specific portion of a page
</a>
And you can test it live by clicking here.
If you want to target an exact text:
<a href="https://yashints.dev/#:~:text=almond%20croissant%20addict">
Click to go to a specific portion of a page
</a>
You can also add an end text in which case the text directive refers to a range of text on the page.
<a href="https://yashints.dev/#:~:text=Although,web%20developer">
Click to go to a specific portion of a page
</a>
Use cases
Search engines
When search engines will link to pages which contain relevant information to the query, they will scroll and highlight that so the user will find it easier.
Citation / Reference links
Links are sometimes used as citations on some pages where the author wishes to enforce a claim by pointing to a reference such as Wikipedia. These reference pages can contains large chunks of text and finding the information can be difficult. So having the ability to scroll to that section and highlight it is really encouraging to readers to follow the links.
Sharing a specific text or paragraph
Sometimes you want to share a piece of text to someone for example by email or on social media, it's really helpful to be able to link directly to the specific section rather than the whole page.
Nowadays people share short snippets directly in tweets or create screenshots which can contain more text and post those. With this they won't need to do that since links can be more meaningful.
Summary
And that's how the web is moving towards a better place where users are the centre of attention for us developers and the more we know how to make their lives easier the more they trust us to take care of it for them.
Enjoy your evening and till next time ๐๐ฝ.
Top comments (8)
Nice, ๐, In mobile, Try it links doesn't work. All links goes to top of your web page .
Yes, I mentioned it just works in Chrome and Firefox at this point ๐
Yeah, its a shame how google works behind closed doors by implementing stuff in chrome and expecting everybody else to adapt to their idea. Now we have some browser that supports something and everybody else who either implement it on their terms, or not, and we have IE6 era again.
PS. From what i see, only chrome/edge (so probably Blink engine) supports it: caniuse.com/#search=scroll%20to%20...
As I mentioned this is a proposal by W3C, so other browsers will follow implementing it
Woah this will be super useful in the future when it is more widely adopted. Thanks for sharing!
Thanks
With smooth scrolling the effect can be animated smoothly too. This I will defintley use in the future!
This looks really neat, especially love the highlight on the target page