Generate Fixed Table Of Contents With Scrollspy - jQuery createTOC

A simple table of content generator which automatically generates a list of internal anchor links pointing to the corresponding page sections within the document.

The generated toc supports h1 - h6 headling elements and automatically highlights the active anchor link when scrolling through page sections.

Ideal for generating a sticky navigation for content-heavy webpages or one page scroll websites to improve user experience and boost search engine rankings.

See also:

• 10 Best Table Of Contents JavaScript Plugins

How to use it:

1. Insert the JavaScript file jquery.createTOC.js after jQuery but before you close the body tag.

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" 
        integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" 
        crossorigin="anonymous">
</script>
<script src="src/jquery.createTOC.js"></script>

2. Call the function on the main content and specify the container in which you want to generate the table of contents.

<div class="sidebar">
</div>

<div class="main">
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>
</div>

$('.main').createTOC({

  // the title of the table of contents
  title: "MY TOC",

  // TOC container
  insert: ".sidebar"
  
});

3. That's it. The plugin will generate an HTML unordered list based table of contents inside the container .sidebar.

<div class="wrap-toc">
  <div class="toc-title">MY TOC</div>
  <ul class="toc-box">
    <li class="toc-item toc-H1">
      <a class="toc-item-link" href="#toc_0_H1">Heading 1</a></li>
      <li class="toc-item toc-H2"><a class="toc-item-link" href="#toc_1_H2">Heading 2</a></li>
      <li class="toc-item toc-H3"><a class="toc-item-link" href="#toc_2_H3">Heading 3</a></li>
  </ul>
</div>

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

/* example CSS */
.toc-box { list-style: none; }
.toc-title { text-align: center; }

.wrap-toc .toc-title {
  font-size: 1.5rem;
  font-weight: 500;
  margin: 1rem 0;
}

.wrap-toc .toc-box .toc-item-link {
  display: block;
  padding: 4px 1rem;
  color: #333;
}

.wrap-toc .toc-box .toc-item-link:hover {
  background-color: #ebedef;
}

.wrap-toc .toc-box .toc-item.active .toc-item-link {
  color: #007fff;
  background-color: #ebedef;
}

Changelog:

2019-09-06

• Added the highlight on click functionality.

2019-08-30

• Fixed for IE/Edge/Safari

2019-08-23

• Fixed for IE.

2019-08-19

• Updated JS

---

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