Simple jQuery TOC Generator With Smooth Scroll - Toc.js

Toc.js is a tiny and simple-to-use jQuery plugin that automatically generates a table of contents for all of the headings elements within a specified container. Also provides a smooth scrolling effect when you navigate between content sections.

Basic usage:

1. Create a DIV container for the table of contents.

<div id="toc_container"></div>

2. Place jQuery library and the jQuery toc.js plugin at the bottom of your webpage.

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="jquery.toc.js"></script>

3. Call the toc() function on the target container and the plugin will do the rest.

$("#article_with_toc").toc();

4. Style the table of contents in yoru CSS file.

#toc_container {
  ...
}

.toc_container ul {
  ...
}

5. The plugin offers sufficient customization options through a set of optional parameters.

$("#article_with_toc").toc({

  // option to shorten headlines that are too long
  shorten: false,

  // strip them after
  stripAfter: 50,

  // speed of scrolling animation
  scrollSpeed: 400,

  // offset (useful if fixed positioned headers are used)
  scrollOffset: 0,

  // wrapper for toc (for example if displayed in bubble)
  wrapWith: '<div class="toc_container"/>',

  // toc container (parent element of toc)
  container: 'body'
  
});

---

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