jQuery Plugin To Auto Generate Navigation For Long Content - heading-list

heading-list is a jQuery table of contents plugin which automatically generate a navigation menu from heading elements, which allows the visitor to scroll smoothly between different sections in your long webpage.

How to use it:

1. Put the jQuery heading-list.js script after you've loaded jQuery JavaScript library like this:

<script src="jquery.min.js"></script>
<script src="jquery-heading-list.js"></script>

2. Create an empty nav element for the table of contents.

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

3. Calling the function will automatically generate a list of anchor links from h1-h6 elements.

$("#heading-list").headingList();

4. Style the table of contents with your own CSS.

#heading-list > ul > li {
  margin: 10px 0;
  list-style: none;
}

#heading-list > ul > li:hover { background-color: #E74C3C; }

#heading-list > ul > li > a {
  font-weight: bold;
  text-decoration: none;
  color: #fefefe;
}

#heading-list > ul > li > a:hover { color: #FFFFFF; }

5. Override the default options to customize the plugin.

$("#heading-list").headingList({

  // target container
  target: 'body',

  // animation speed in ms
  scrollSpeed: 500,

  // prefix 
  prefix: '  '
  
});

---

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