Previously, to link to a specific Text Fragment, you would have to write code that targeted individual elements and their corresponding number of characters. However, with Scroll To Text Fragment, we can now deep-link anywhere on a page. For example, you can now write the code for an anchor tag with the anchor text "Scroll To Text Fragment", and when a user clicks it, they will be linked directly to this particular text fragment.
You can also make use of our Scroll To Text Fragment Generator to get your very own in seconds. It's free!
How to Deep Link on Chrome using Scroll to Text
How to use our Bookmarklet?
Drag and drop the bookmarklet to your Toolbar to generate your Scroll To Text Fragment link. Click the bookmarklet when you want to read more about a domain name.
Steps to follow
- Select text on-page
- Click on the button Scroll to Text Fragment Bookmarklet in the Chrome bookmark bar.
- All you need to do is copy the generated link.
- The link can now be shared or opened in a new tab.
What is the Scroll To Text Fragment Syntax?
The Scroll To Text Fragment Syntax is a new addition to the Web Content Accessibility Guidelines 2.1. It allows for content to be scrolled by an assistive technology such as a screen reader, when it has been identified as being outside of the viewport.
The HTML5 specification defines an element called <section>. This can be used to group content together, which can then be scrolled by assistive technologies. In order to do this, the <section> element must contain a <header> element and a <footer> element. The <header> and <footer> elements must also be contained within an <article> element.
The following markup shows how this could look in practice:
- <article id="x-article" class="x-article">
- <header>Some header content</header>
- <section id="x-section">Some section content</section>
- <footer>Some footer content</footer></article></p>
Let’s understand some of the terminologies
textStart
The textStart parameter is the character position of your first highlight. The default value is 1, which means that the first character in your text will be highlighted.
If you're looking to highlight multiple instances of the same word or phrase at once, you can use this parameter to specify where each instance begins. For example, if you want to highlight the word "hello" three times, you'd need to set textStart to 3 for all three instances.
textEnd
If you want to highlight a large block of text, you can use this optional field. The command operated on text in between the commands- textStart and textEnd.
prefix
To highlight the text, a prefix command is used along with textStart. To execute it, the text should be placed immediately after ‘prefix-’ and preceding the ‘textStart’ command.
suffix
To highlight the text in the textStart, it should be followed by the command ‘-suffix’. This is an optional field.
FAQs
Can Scroll To Text Fragment links work on Firefox, IE, Edge or other browsers?
The answer is no. It's because of the scroll to element feature that only works in Chrome.
I'm having trouble with my ScrollTo Text Fragment link not working properly. What should I do?
If you have any problems with your ScrollTo Text Fragment link not working properly, please let us know by sending us an email at <email Id>.
Scroll To Text Fragment links are not working on your iPhone, and I’m wondering why.
This is because the Scroll To Text Fragment links are a feature that works with Chrome, but not with Safari on iOS.