Simple jQuery TOC Generator With Smooth Scroll - Toc.js

File Size: 4.88 KB
Views Total: 2014
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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="//"></script>
<script src="jquery.toc.js"></script>

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


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.


  // 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.