Create A Table Of Contents From Headings - jQuery contentify

contentify is a simple and lightweight jQuery plugin to automatically generate a table of content from the heading tags (h1, h2, etc) in your HTML document.

Use it as a user-friendly in-page navigation that allows your visitors to visit their favorite parts within the webpage.

Additionally, the plugin automatically assigns unique IDs to heading tags within the document so that your visitors can navigate between these page sections with a configurable smooth scroll effect.

How to use it:

1. Use heading tags to break down your long content (e.g. post, article, product description) into several sections.

<h1>Chapter 1</h1>
  <h2>Section 1.1</h2>
    <p>Content 1.1</p>
  <h2>Section 1.2</h2>
    <p>Content 1.2</p>
<h1>Chapter 2</h1>
  <h2>Section 2.1</h2>
    <p>Content 2.1</p>
  <h2>Section 2.2</h2>
    <p>Content 2.2</p>
    ...

2. Create a container to hold the table of contents (typically at the top of the page).

<div id="toc"></div>

3. Insert the jQuery contentify plugin's script jquery.contentify.js into the webpage, after loading the latest jQuery library.

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

4. Initialize the plugin to generate a default table of contents inside the container you just created.

$('#toc').contentify();

5. Apply custom styles to the table of contents.

#toc {
  /* styles here */
}

#toc a {
  /* styles here */
}

6. Customize the title of the table of contents.

$('#toc').contentify({
  title: 'My Navigation'
});

7. Determine which heading tags should be considered when building the table of contents.

$('#toc').contentify({
  headingSelectors: ['h1', 'h2', 'h3', 'h4', 'h5']
});

8. Specify the duration of the scrolling animation.

$('#toc').contentify({
  scrollDuration: 1000
});

---

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