Generate Fixed Table Of Contents With Scrollspy - jQuery createTOC

File Size: 7.53 KB
Views Total: 3758
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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:

How to use it:

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

<script src="" 
<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 class="main">
  <h1>Heading 1</h1>
  <h2>Heading 2</h2>
  <h3>Heading 3</h3>

  // 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>

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-link {
  color: #007fff;
  background-color: #ebedef;



  • Added the highlight on click functionality.


  • Fixed for IE/Edge/Safari


  • Fixed for IE.


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