Simple Table of Contents And Smooth Scroll In jQuery - vzv_sub_menu

vzv_sub_menu is a lightweight table of contents plugin for automatically generates a context menu from heading elements within the document. Clicking on the anchor links within the context menu will smoothly scroll the webpage to their corresponding contents.

How to use it:

1. Place both jQuery JavaScript library and the jQuery vzv_sub_menu plugin at the bottom of the web page.

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

2. Call the function on document ready and the plugin will look for all the heading elements within the document and generate a basic context menu at the top of the web page.

$('body').vzv_sub_menu();

3. Clone the table of contents and display it at the bottom of the web page.

$('body').vzv_sub_menu({
  before: true,
  after: true
});

4. Define the heading elements you want to use.

$('body').vzv_sub_menu({
  headers: 'h1, h2, h3, h4, h5, h6'
});

5. Specify the animation speed when scrolling to a specific point of the web page.

$('body').vzv_sub_menu({
  speed : 400
});

6. Append the table of contents to a specific container.

$('body').vzv_sub_menu({
  'append_to': '.container' // default: 'body'
});

7. Customize the title of the table of contents.

$('body').vzv_sub_menu({
  title: '',
  title_tag: 'h4',
});

8. Apply your own CSS styles to the table of contents.

$('body').vzv_sub_menu({
  class: 'vzv_sm_list'
});

.vzv_sm_list {
  /* 
    ...
  */
}

---

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