Automatic TOC Generator With Smooth Scroll - autoToc.js

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.

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

<script src="" 
<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.

  <h2> Section 1 </h2>
  ... Content 1 ...
  <h2> Section 2 </h2>
  ... Content 2 ...
  <h2> Section 3 </h2>
  ... Content 3 ...
  More Sections Here

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


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.

  • Publication date: 11.09.2018
  • Source