What Is Table Of Contents
Table Of Contents (TOC) is a kind of in-page navigation that displays a list of anchor links pointing to the different page sections within the HTML document.
It can help improve the user experience on the long webpage thereby increasing your ranking in search engines.
In general, a table of contents plugin automatically exacts content from heading elements (h1, h2, h3, etc) within the document and generates anchor links based on the CSS ID you assign.
Clicking the anchor links will scroll the page to the corresponding page sections for better in-page navigation experience.
The Best Table Of Contents Plugin
Originally Published Mar 18 2019, updated Feb 05 2020
Table of contents:
Best jQuery Table Of Contents Plugins:
Tocify is a jQuery Plugin for creating a table of of contents that provides support for smooth scrolling, scroll highlighting, scroll page extending, and forward and back button support.
Just another jQuery plugin which makes it easier to create a table of contents for your long documents with support for scrollspy and smooth scroll. The smooth scroll experience is provided by the smooth-scroller plugin which has been integrated into the plugin.
A lightweight jQuery & Bootstrap plugin used to generate a sticky, collapsible table of contents from heading tags within the document.
toc is a jQuery plugin that allows to auto generate Table of Contents from the content on your single web page, using semantic, nested lists with hash-link anchors to headings. The plugin generates hash-links to the headings on the page, to allow users to jump to the heading by clicking in the generated table of contents.
A simple and useful jQuery plugin for adding a fixed table of contents drop-down menu on the top of your webpage. It can be used as a content navigation that provides your visitors with an easy way to quickly navigate to other content areas.
Best Vanilla JS Table Of Contents Plugins:
This is a pretty cool side TOC (table of contents) & navigation system which allows to highlight the current nav item with an animated progress line when you scroll through the webpage.