Scroll To Text Fragment is a controversial feature implemented in v80 of the Chrome (desktop and android only, does not work on iOS) browser. It is designed as a global method to deep-link to any part of a web document.
This allows users to link to a specific portion of a page, using a text snippet provided in the URL. When the page is loaded, the browser highlights the text and scrolls it into view.
Think of it like URL hash/Jump Links but without the need for authors annotating their page and correctly guessing all points that might be interesting to a user.
Scroll To Text Fragment is only available on Chrome and it’s enabled by default in version 80 and up on Mac, Windows, Linux, Chrome OS and Android. You can learn more about it here.
Our FREE Scroll To Text Fragment Generator will help you easily generate these links. Check out the video to see how to use it.
What is the Scroll To Text Fragment Syntax?
This is the syntax for the feature and is appended to the URL to allow specifying text as part of the URL fragment.
There are 4 fields, 3 of which are optional:
The provided text is percent-decoded before matching. Dash (-), ampersand (&), and comma (,) characters in text snippets must be percent-encoded to avoid being interpreted as part of the text fragment syntax.
Let’s look at an example:
We take a URL eg: https://supple.com.au and add the fragment
So with the textStart fragment the URL becomes something like
Clicking on such a URL will cause the browser to highlight the first instance of the matched text with a yellow background and scroll to that position on the page.
Scroll To Text Fragment Bookmarklet
Prefer a bookmarklet to generate your Scroll To Text Fragment links we got you covered. Just drag and drop the Scroll To Text Fragment button, to the browser’s bookmark bar.
How to use this bookmarklet?
- Select text on-page.
- Click on Scroll To Text Fragment Bookmarklet in your Chrome’s bookmark bar.
- Copy the generated link.
- That’s it. You can now share that link or open it in a new tab.
- For advanced options, watch the video.
updated 25th March 2020
This is a required field. This is the text that you want to highlight. If there are multiple instances of this text, the first instance will be highlighted.
This is an optional field and can be used when you want to highlight a large block of text. The browser will highlight everything starting from the text in textStart and end with the text in textEnd.
This is an optional field, used to highlight the text in textStart which is immediately preceded by the text in prefix-.
If you click on https://supple.com.au/#:~:text=SEO you will see that it highlights the 1st instance of the word SEO. But what if you want to highlight the word SEO where it’s immediately preceded by the word Paid Advertising? That’s where the prefix- context term comes in
This is an optional field. You use this to highlight the text in textStart which is immediately followed by the text in -suffix.