TOC-like Navigation Generator with jQuery - anchorlist

anchorlist is an extremely lightweight jQuery plugin that generates an html list based navigation from specific heading tags within the document.

Similar to the table of contents and great for one page scroll website or single page web application.

How to use it:

1. Include the jquery.anchorlist.js plugin after including jQuery library.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="jquery.anchorlist.js"></script>

2. Create an empty navigation element.

<nav id="anchor-list"></nav>

3. Enable the plugin to generate a basic navigation list from all h2 headings inside the article element.

$(function(){
  $('#anchor-list').anchorlist({ 
    anchor: $('article h2') 
  });
});

4. By default, the plugin will automatically add a CSS class anchorlist to the navigation list. So you can play with CSS. You can also change the CSS class using classname option during initialization.

$(function(){
  $('#anchor-list').anchorlist({ 
    anchor: $('article h2'),
    classname  : 'anchorlist'
  });
});

---

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