Generating An In-page Navigation For Your Long Document - autoTOC

autoTOC is a jQuery plugin used to generate an in-page navigation (table of contents) from semantic elements allowing the user to scroll smoothly to their corresponding content sections on click. Great for your long posts/articles which have tons of paragraphs, images, diagrams, etc.

How to use it:

1. Create a DIV container for the table of contents that allows to be placed anywhere on the webpage.

<div id="toc">
</div>

2. Include jQuery library and the jQuery autoTOC plugin's script at the bottom of the webpage.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="jquery.autotoc.js"></script>

3. Call the function on the heading elements and specify the target container where you want to render the table of contents.

$("h1,h2").autoTOC({ 
  toc: "#toc" 
});

4. That's it. The plugin will auto generate a TOC list inside the container '#toc' like this:

<ul class="autotoc">
  <li class="H1 selected">Content Section One</li>
  <li class="H2">Content Section Two</li>
  <li class="H2">Content Section Three</li>
  <li class="H2">Content Section Four</li>
  <li class="H2">Content Section Five</li>
</ul>

5. Apply your custom styles to the items.

.autotoc { ... }

.selected { ... }

.H1, .H2, .H3 { ... }

---

This awesome jQuery plugin is developed by craigcocca. For more Advanced Usages, please check the demo page or visit the official website.