Easy Table Of Contents Generator With jQuery - jToc

jToc is a tiny and easy-to-use jQuery table of contents plugin which automatically generate a page navigation with anchors and IDs for all of the heading elements in the document. Clicking on the anchors in the toc will smoothly scroll to their corresponding headings.

How to use it:

1. Just include the jQuery jToc plugin after jQuery library and we're ready to go.

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

2. Create an empty html unordered list for the table of contents.

<ul id="toc">
  
</ul>

3. Calling the function on the html list will automatically generate a table of contents from all the heading elements (h1~h3) within the document.

$('ul#toc').jtoc();

4. Specify the heading elements from which you want to generate the table of contents.

$('ul#toc').jtoc({
  headings: 'h2,h3,h4,h5,h6'
});

5. Specify the target container you want to search through the heading elements.

$('ul#toc').jtoc({
  content: '.content'
});

6. Config the smooth scroll behaviors.

$('ul#toc').jtoc({
  scrollEnabled: true,
  scrollSpeed: 400,
  scrollEase: 'swing',
  scrollEl: 'body,html',
  scrollOffset: 0
});

7. Add a custom prefix to the anchor links.

$('ul#toc').jtoc({
  anchorPrefix: '',
});

---

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