pavlobondarchuk

Simple Sticky TOC automatically generates a sticky table of contents for single posts or pages by parsing <code><h2></code>, <code><h3></code>, and <code><h4></code> tags. It is lightweight, mobile-friendly, and works without jQuery.
Features: 
– Automatically detects and anchors h2–h4 headings 
– Sticky TOC with vertical layout on desktop 
– Sticky toggleable TOC on mobile 
– Built-in RTL support (positioning + layout) 
– Option to disable TOC on individual posts 
– Option to customize TOC layout from your theme 
– Auto-generated anchor IDs for headings 
– Clean CSS, pure JavaScript, no jQuery
<h3>Theme Override Support</h3>
To override the default markup or styles:
<ol>
<li>
Copy the default template files from the plugin:
<ul>
<li><code>frontend/partials/toc-template.php</code></li>
<li><code>assets/css/toc.css</code></li>
<li><code>assets/js/toc.js</code></li>
</ul>
</li>
<li>
Paste them into your theme inside the following folder:
<ul>
<li><code>your-theme/simple-sticky-toc/</code></li>
</ul>
</li>
</ol>
Supported override files:
<ul>
<li><code>simple-sticky-toc/toc-template.php</code> – custom TOC markup</li>
<li><code>simple-sticky-toc/toc.css</code> – custom styles</li>
<li><code>simple-sticky-toc/toc.js</code> – custom JS behavior</li>
</ul>

Simple Sticky TOC

Lightweight sticky table of contents for mobile and desktop. Automatically generates anchor links for h2–h4 headings. No jQuery.

Arunas Liuiza

A tiny and simple to help with navigation in long texts by forming an automatic Wikipedia-like table of contents.
It works by scanning the text for headings (<code><h1>-<h6></code> HTML tags). If more than a certain amount of headings (3 by default) are found – a table of contents with bookmarks is formed and inserted to the post content. Location (above or below) the text can be chosen in settings page.
TOC is formed as HTML5 <code><nav></code> element with nested ordered list inside. No specific styling is provided, so that it fits organicaly into the text. If you need specific styling, include it to your theme’s CSS.
You can also use a shortcode – <code>[toc]</code>, template tags – <code>get_toc()</code>/<code>the_toc()</code> and a widget – <code>tinyTOC Widget</code>.
The plugin is translation ready and has Lithuanian translation.
Also try out my other plugins:
<ul>
<li><a href="http://arunas.co/cc" rel="nofollow ugc">Content Cards</a> – a plugin that makes ordinary web links great by making it possible to embed a beautiful Content Card to link to any web site.</li>
<li><a href="http://arunas.co/gust" rel="nofollow ugc">Gust</a> – a Ghost-like admin panel for WordPress, featuring Markdown based split-view editor.</li>
<li><a href="http://arunas.co/tinycoffee" rel="nofollow ugc">tinyCoffee</a> – a PayPal donations button with a twist. Ask people to treat you to a coffee/beer/etc. </li>
<li><a href="http://arunas.co/tinysocial" rel="nofollow ugc">tinySocial</a> – a plugin to display social sharing links to Facebook/Twitter/etc. via shortcodes</li>
<li><a href="http://arunas.co/tinyrelated" rel="nofollow ugc">tinyRelated</a> – a plugin to manually assign and display related posts.</li>
<li><a href="http://arunas.co/tinyip" rel="nofollow ugc">tinyIP</a> – Premium – stop WordPress users from sharing login information, force users to be logged in only from one device at a time.</li>
</ul>
An enormous amount of coffee was consumed while developing these plugins, so if you like what you get, please consider treating me to a <a href="http://arunas.co#coffee" rel="nofollow ugc">cup</a>. Or two. Or ten.
Cover image credit: <a href="https://www.flickr.com/photos/adactio/1523797880/" rel="nofollow ugc">Jeremy Keith</a>

tinyTOC

Automaticly builds a Table of Contents using headings (h1-h6) in post/page/CPT content.

Simple Sticky TOC vs tinyTOC