2 Javascript Table of Contents
This collection provides comprehensive solutions for creating dynamic tables of contents (TOC). JavaScript is used to automatically scan headings and generate nested lists, ensuring the navigation is always up-to-date. To enhance UX, the Intersection Observer API is implemented to efficiently highlight the active section on scroll without performance overhead. Additionally, smooth scrolling and offset correction for sites with fixed headers are implemented, turning a simple TOC into a powerful navigation tool.
Examples
Auto-Generated Anchor Positioned TOC
This is an Auto-Generated Anchor Positioned TOC. It parses an article’s heading structure on the fly and constructs a sticky navigation menu. Its primary function is to replace heavy JavaScript scroll-spies (Intersection Observers) with native CSS Anchor Positioning and Scroll Targeting, moving an animated highlight alongside the active content section. (Requires: Tweakpane, GSAP)
Chrome 125+
Edge 125+
See the Pen Auto-Generated Anchor Positioned TOC.
Dynamic Active Table of Contents
A convenient navigation for long-reads or documentation that automatically structures content and visually indicates the user’s current section.
See the Pen Dynamic Active Table of Contents.