Automatic TOC Generator With Smooth Scroll - autoToc.js

The autoToc.js jQuery plugin automatically generates a table of contents from all the h2 headings found within the article element.

Simple, lightweight, powerful, efficient and easy to use.

Also provides a smooth scroll functionality that enables the menu items to smoothly scroll through the page sections.

How to use it:

1. Import both jQuery JavaScript library and the jQuery autoToc.js library into the html.

<!--jQuery-->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" 
        integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT" 
        crossorigin="anonymous">
</script>
<!--autoToc.js-->
<script src="js/autoToc.js"></script>

2. Create a containe in which the table of contents will be generated.

<div class="at"></div>

3. Split your article into several sections using h2 tag.

<article>
  <h2> Section 1 </h2>
  ... Content 1 ...

  <h2> Section 2 </h2>
  ... Content 2 ...

  <h2> Section 3 </h2>
  ... Content 3 ...

  More Sections Here
</article>

4. The JavaScript to generate an ordered list based table of contents in the document.

$(document).ready(function(){
   $(".at").autoToc();
});

5. The example CSS to style the table of contents.

.auto-toc {
  background: #f2f2f2;
  padding: 15px;
  margin: 15px;
  border-radius: 4px;
}

.auto-toc ol{
  padding: 10px;
}

.auto-toc ol li{
  margin-left: 10px;
  padding: 0px;
  box-sizing: border-box;
}

.auto-toc ol li a{
  text-decoration: none;
  color: #348781;
  display: block;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.1);
  padding: 10px;
}

.auto-toc ol li a:hover{
  background: rgba(0, 0, 0, 0.095);
}

.auto-toc h4 {
  font-size: 15pt;
  text-align: center;
}

---

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