Categories
🌐 Web

How to Link to Text on a Web Page in Chrome and Edge

Create a link that automatically scrolls to a selected text on a webpage when opened in Chrome or Edge

The Google Chrome version 81 or later comes with a neat little hidden feature called “Scroll to Text Fragment”. It enables users to link to any specific content on a web page.

The Scroll to Text Fragment is still a new feature and isn’t completely polished or baked in any of the available browsers yet. But developer Paul Kinlan has made an easy-to-use bookmarklet that let you take the advantage of this feature even now.

Bookmarklets are bookmarks or favourites with small block/snippets of JavaScript code, that when clicked can perform some pre-defined actions. In this case, the bookmarklet will format the URL in the address bar in a way that it points to selected text on a webpage.

Drag and Drop the ‘Scroll to Text’ Bookmarklet in Bookmarks bar

Below is a drag and drop bookmarklet for you if you don’t want to go through the hassle of creating one. It works from both Google Chrome and Microsoft Edge.

Press Ctrl+Shift+B if you don’t have bookmark/favourites bar enabled in your browser. Then drag and drop the link shown below into the bookmark bar to add the scroll to text Bookmarklet.

Drag this Link → Share with Find


Create the Bookmarklet manually in Chrome

If you can’t drag and drop the bookmarklet into your browser as instructed in the GIF above, then manually create it in Chrome. Open Bookmarks Manager by pressing Ctrl+Shift+O or click on settings then go to ‘Bookmarks’ and select ‘Bookmarks manager’.

Right-click anywhere in the Bookmark Manager tab then select ‘Add new bookmark’.

Paste the JavaScript code given below in the URL bar of Add bookmark pop up. Name the bookmarklet as ‘Share with Find’ or with something similar and then click ‘Save’.

javascript:(function(){const selectedText=getSelection().toString();const newUrl=new URL(location);newUrl.hash=`:~:text=${encodeURIComponent(selectedText)}`;window.open(newUrl);})();

You can now start using the scroll to text bookmarklet, be sure to enable the bookmark bar by pressing Ctrl+Shift+B keys.


Create the Bookmarklet manually in Edge

You need to be on the latest chromium-based Edge to use the Scroll to Text bookmarklet, as this feature is not yet supported by non-chromium based browsers.

To create a bookmarklet in Edge, open ‘Manage favourites’ settings by pressing Ctrl+Shift+O or go to Edge menu » Favorites » Manage favorites option.

In ‘Manage favourites’ tab, in the Favourites bar section right-click anywhere in the right pane and select the ‘Add favourite’ option.

Paste the following JavaScript snippet in the URL bar and name the bookmarklet as ‘Share with Find’ and then click on ‘Save’.

javascript:(function(){const selectedText=getSelection().toString();const newUrl=new URL(location);newUrl.hash=`:~:text=${encodeURIComponent(selectedText)}`;window.open(newUrl);})();

Now make sure ‘Favorites bar’ is enabled in your Edge browser and the bookmarklet is visible in the bar. If not, press the Ctrl+Shift+B keyboard shortcut to bring up the Favorites bar in Edge.


Using the Scroll to Text Bookmarklet

To use the bookmarklet, open any web page and select the text you want to create the link to, then press on the Scroll to Text bookmarklet (Share with Find). A new window will open highlighting the text that you have selected in the previous tab.

You can now share the link of the new window with anyone and it will open the location of your highlighted text as long as they are using Google Chrome or the new Microsoft Edge.


Internet is a sea of information, little neat tricks like these help save time. In case you haven’t already experienced, Google Search also uses the ‘Scroll to Text Fragment’ to highlight text on a web page when directing a user to it from the ‘Featured’ snippets in search results.