On long webpages, often it can be difficult to scroll through and find the specific piece of information you are looking for. Some webpages do provide a table of contents to easily navigate to different sections, but most websites don’t. Furthermore, the table of contents is shown only at the beginning of page, so to returning to it requires more scrolling.
To quickly find the content you want on a webpage, have a look at Scrollbar of Contents for Google Chrome browser and Scrollbar Search Highlighter for Mozilla Firefox. Both the extensions automatically finds and displays clickable markers for all headings on a page and places them proportionately on the scrollbar.
Scrollbar of Contents for Google Chrome
You can customize how the extension works from its settings page. You can configure to hide/show markers by default or to automatically show on scroll. By default, the entire page title is shown, this can cause overlapping on pages that have long titles, or titles too close to each other. To avoid this, you can configure to show only first ten characters of the heading or the first three words instead of the entire heading text.
You can also change the levels of headings shown. There are six headings in web pages, h1 is the most important while h6 is the least. The level determines which headings are displayed on the scrollbar. Default is 3 (h3), but you can choose any you want. This setting can take a bit of testing as different web developer/designer may use different tags for page headers.
Furthermore, you can minimize, hide, or show the markers using keyboard shortcuts. Shift + Alt + M is used for minimize/maximize, and Shift + Alt + N is used to show/hide markers. These are not changeable.
Download: Scrollbar of Contents
Content Scrollbar for Mozilla Firefox
This add-on is a port of the Chrome version. It’s still in its early stages of development so keyboard shortcuts and options dialog are not yet available. Though, you can customize extension behavior by going to about:config and searching for the following values:
- extensions.contentscrollbar.enabled
- extensions.contentscrollbar.autoenabledonnewtab
- extensions.contentscrollbar.backgroundcolor
- extensions.contentscrollbar.maxheadingsize
- extensions.contentscrollbar.textlength
More information on these is available on the add-on download page.
Download: Content Scrollbar
These two extensions will provide you a more interactive browsing experience on your favorite browser. Install them to read lengthy in a more convenient fashion.