[table of contents] A Lightweight jQuery Plugin for Creating a Dynamic Menu

jQuery.sdScrollMenu is a lightweight jQuery plugin for creating a dynamic menu based on <h *> headings within a text.

jquery toc example, table of contents javascript, create dynamic table in jquery, dynamic table of contents javascript, jquery create table of contents


  • Supports an unlimited number of titles
  • Highlights addresses on hover with the .active class
  • Responsive with the inner slider and focus on the active items

How to make use of it:

1. First of all, you’ll need to set the plugin to a large <div> filled with text.

<div id="scroll-menu">
  <h1>Section 1</h1>
  <p>Lorem ipsum ...</p>
  <h2>Sub-section 1.1</h2>
  <p>Nullam vestibulum ...</p>
  <p>Nunc hendrerit ...</p>
  <h2>Sub-section 1.2</h2>
  <p>Integer feugiat ...</p>
  <h3>Sub-section 1.2.1</h3>
  <p>Cras porta ...</p>
  <h3>Sub-section 1.2.2</h3>
  <p>Aenean vestibulum ...</p>
  <h1>Section 2</h1>
  <p>Cras ullamcorper ...</p>
  <!-- and so on -->

2. You will then need to model the .active class and the .active.first class respectively because they are the ones applied to the <li> match in the list, like so:

.sdsm-menu li:hover {
    color: #146;

.sdsm-menu li.active.first {
    font-weight: bold;
    color: #a19d38;

.sdsm-menu li.active {
    color: #a19d38;

3. jQuery.sdScrollMenu initialization syntax is as follows:

jQuery(function($) {

        width: 250, // integer: in px
        scrollDuration: 500, // integer: in ms
        titles: 'h3, h4, h5, h6', // string: jQuery selectors
        highlightDuration: 1000, // integer: in ms
        highlightColor: '#a19d38' // string: color



widthinteger250The width in pixels of the menu
scrollDurationinteger500The duration in ms of the scrolling animation when menu links are clicked
titlesstring'h1, h2, h3, h4, h5, h6'The jQuery selectors from where titles will be used to build the menu. Please note that only <h*> tags are supported and must be increased.
highlightDurationinteger1000The duration of the color fading out when menu links are clicked
highlightColorstring(none)The color of the title background being fade out

auto table of contents jquery, jQuery.sdScrollMenu Plugin/Github/jsfiddle, html automatic table of contents

See Demo And Download

Official Website(stevedavid): Click Here

This superior jQuery/javascript plugin is developed by stevedavid. For extra advanced usage, please go to the official website.

Related Posts


CSS Layout Components Horizontal/Vertical Stack | HStack and VStack

HStack and VStack in CSS – CSS layout components that (basically) stack anything horizontally and vertically. A pure CSS library that makes it easy to stack elements…


How to Add Floating Whatsapp Chat Button In HTML | venom-button

Venom Button is a very simple plugin for the jQuery floating WhatsApp button. Adds a floating button to your site that calls WhatsApp Click to Chat API. It will automatically start the WhatsApp…


Interactive Data Table Generator with JS/jQuery and JSON | Tabulator

Tabulator allows you to create interactive tables in seconds from any HTML Table, JavaScript array, AJAX data source, or JSON format data. Just include the library in your…


Simple Alert, Confirm, Prompt Popup Using Vanilla JavaScript Library | attention.js

JavaScript provides various built-in functionality to display popup messages for different purposes. Attention JS is a vanillaJS plugin used to create a custom alert, confirm, or Prompt…


Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…


Lightweight Bootstrap 4 Toast Notification Plugin | BS4 Advanced Toast

A lightweight Bootstrap 4 Toast Notification plugin integrated with JS/jQuery. bs4-toast.js is a JavaScript library that enhances the native Bootstrap toast component with icons, buttons, callbacks, and…

Leave a Reply

Your email address will not be published. Required fields are marked *