https://github.com/developer-zahid/dynamic-toc-generator
Dynamic Table of Contents Generator. Live preview: https://developer-zahid.github.io/dynamic-toc-generator/
https://github.com/developer-zahid/dynamic-toc-generator
blog table-of-contents toc webflow
Last synced: 3 months ago
JSON representation
Dynamic Table of Contents Generator. Live preview: https://developer-zahid.github.io/dynamic-toc-generator/
- Host: GitHub
- URL: https://github.com/developer-zahid/dynamic-toc-generator
- Owner: Developer-Zahid
- Created: 2025-01-28T07:44:44.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-04T21:46:10.000Z (about 1 year ago)
- Last Synced: 2025-07-06T03:37:28.037Z (10 months ago)
- Topics: blog, table-of-contents, toc, webflow
- Language: HTML
- Homepage: https://developer-zahid.github.io/dynamic-toc-generator/
- Size: 5.86 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Dynamic Table of Contents Generator
A lightweight, jQuery-based Table of Contents generator that automatically creates a dynamic navigation menu from H2 headings in your content.
[Demo Preview On Codepen](https://codepen.io/DeveloperZahid/full/VYZqgge)
## Features
- 🚀 Automatically generates TOC links from H2 headings
- 📜 Smooth scrolling to sections
- 🎯 Active section tracking during scrolling
- 🔗 URL hash updates without page reload
- 🎨 Customizable via data attributes
- 📱 Responsive and mobile-friendly
- ✨ Handles duplicate heading text
- 🔄 Supports multiple TOC instances on one page
## Installation
1. Add the Dynamic Table of Contents Generator script to your project after jQuery script.
```
```
## Usage
### Basic Structure
Your HTML should follow this basic structure:
```html
Your Heading 1
Content...
Your Heading 2
Content...
```
### Data Attributes
Copy and use these data attributes to configure your Table of Contents:
```html
```
#### Available Data Attributes
| Attribute | Description | Default |
|-----------|-------------|---------|
| `data-toc-element="wrapper"` | Main wrapper element | Required |
| `data-toc-element="list"` | Container for TOC links | Required |
| `data-toc-element="article"` | Content container with H2 headings | Required |
| `data-toc-link-class` | CSS class for TOC links | "toc-link" |
| `data-toc-active-class` | CSS class for active TOC link | "active" |
| `data-toc-scroll-top-offset` | Offset from top when scrolling (in pixels) | 0 |
| `data-toc-scroll-duration` | Scroll animation duration (in milliseconds) | 400 |
### Example with All Options
```html
Example Heading 1
Example Heading 2
```
### Generated Output
```html
Example Heading 1
Example Heading 2
Example Heading 1
Example Heading 2
```
## Browser Support
- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)
- IE11 and above
## Dependencies
- jQuery 3.x
## Author
[Developer-Zahid](https://github.com/Developer-Zahid)
## License
MIT License