10 Best Table Of Contents JavaScript Plugins (2021 Update)

by jQueryScript,

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

This is a collection of 10 best (most downloaded) table of contents jQuery and Vanilla JavaScript plugins for your long web content to improve user experience and boost search engine rankings. Have fun.

Originally Published Mar 18 2019, updated Feb 25 2021

Table of contents:

Best jQuery Table Of Contents Plugins:

Sidebar Table Of Contents Generator with jQuery and Bootstrap - Bootstrap Toc

A lightweight jQuery & Bootstrap plugin used to generate a sticky, collapsible table of contents from heading tags within the document.

Sidebar Table Of Contents Generator with jQuery and Bootstrap - Bootstrap Toc

[Demo] [Download]


Generate Fixed Table Of Contents With Scrollspy - jQuery createTOC

A simple table of content generator which automatically generates a list of internal anchor links pointing to the corresponding page sections within the document.

Generate Fixed Table Of Contents With Scrollspy - jQuery createTOC

[Demo] [Download]


jQuery Table of Contents Plugin - Tocify

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.

jQuery Table of Contents Plugin - Tocify

[Demo] [Download]


Easy jQuery TOC Generator With Smooth Scroll Support - Toc.js

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.

Easy jQuery TOC Generator With Smooth Scroll Support - Toc.js

[Demo] [Download]


Sticky In-page Navigation (TOC) Plugin - jQuery stickyNavigator

stickyNavigator is a jQuery plugin that helps you to create a sticky in-page navigation (table of contents) from specific heading tags within the document.

Sticky In-page Navigation (TOC) Plugin - jQuery stickyNavigator

[Demo] [Download]


Best Vanilla JS Table Of Contents Plugins:

Generating A Table Of Contents with Pure JavaScript – TOC

TOC is a jQuery-free JavaScript plugin that automatically generates a table of contents from HTML heading tags of your long content.

Generating A Table Of Contents with Pure JavaScript – TOC

[Demo] [Download]


Highly Customizable Table Of Contents Generator – Tocbot

Tocbot is an easy yet highly customizable TOC (table of contents) generator created with pure JavaScript. It allows you to automatically generate an interactive in-page navigation menu from headling elements with support for scrollspy and smooth scroll.

Highly Customizable Table Of Contents Generator – Tocbot

[Demo] [Download]


Generate List Based Table Of Contents For Long Document – html-contents

html-contents is a standalone JavaScript library which dynamically generates semantic, SEO-friendly, hierarchical table of contents from heading elements within your long document.

Generate List Based Table Of Contents For Long Document – html-contents

[Demo] [Download]


Animated Side TOC Nav For Long Web Content

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.

Animated Side TOC Nav For Long Web Content

[Demo] [Download]


table-of-contents.js

A really simple table of contents generator to create a hierarchical in-page navigation list from heading elements found within the document.

table-of-contents.js

[Demo] [Download]


More Resources:

Want more jQuery plugins or JavaScript libraries to create awesome Table Of Contents on the web & mobile? Check out the jQuery Table Of Contents and JavaScript Table Of Contents sections.

See also: