Table of Contents — Free HTML CSS JS Snippet

Land on a 3,000-word guide with no table of contents and the only way to know what's ahead — or to get back to the part about installation — is to scroll and hope. A sidebar that lists every section, jumps to it on click, and quietly tracks which one you're currently reading turns that wall of text into something closer to a map. This snippet builds that sidebar entirely from the article's own markup: it walks the DOM for h2/h3 elements, builds the link list automatically, highlights whichever section currently fills the reader's view using IntersectionObserver, smooth-scrolls on click, and stays pinned in view via position: sticky as the page scrolls beneath it.

Building the list from the headings that already exist

Rather than asking authors to maintain a parallel list of links — the kind that quietly drifts out of sync the moment someone adds a section and forgets the sidebar — the script queries article.querySelectorAll('h2, h3') and builds one <li> per heading it finds. Any heading missing an id gets one generated on the spot: h.textContent.trim().toLowerCase().replace(/\s+/g,'-').replace(/[^a-z0-9-]/g,''), lowercasing, hyphenating spaces, and stripping anything that wouldn't survive in a URL fragment. The practical result is that *any* article with headings gets a working, always-current TOC the moment this script runs against it — no manual bookkeeping required.

Why the active zone sits near the top of the viewport, not the middle

A naive "50% visible = active" rule sounds reasonable until you notice that long sections dominate the screen for most of the scroll, while short ones flicker active and inactive within a single swipe. This snippet instead uses rootMargin: '-10% 0% -70% 0%', which shrinks the observer's effective viewport down to a thin horizontal band occupying roughly the top fifth of the screen. A heading is "active" the instant it crosses into *that* band — which corresponds almost exactly to where a reader's eyes are actually resting as they scroll downward. It's the same top-band philosophy the Scroll-Spy Navigation snippet uses for its sliding indicator, just applied here to a flat list of links instead of a pill that glides between them.

Two heading levels, one indentation rule

The visual hierarchy between h2 and h3 entries comes from a single conditional class: links built from an H3 element get .h3 appended, which adds padding-left: 18px and drops the font size slightly. No nested <ul> elements, no recursive tree-building — just one class name deciding how far an item sits from the left edge, which keeps the markup flat and the click-to-scroll wiring identical for every link regardless of its level.

Sticking around without JavaScript scroll handlers

The sidebar uses position: sticky; top: 20px, a single CSS declaration that keeps it pinned near the top of the viewport as the surrounding page scrolls — without a single scroll event listener computing offsets on every frame. Pair that with scrollIntoView({ behavior: 'smooth', block: 'start' }) on each link's click handler (after e.preventDefault() cancels the browser's instant jump), and the whole navigation experience — sticky position, smooth travel, live highlight — runs almost entirely on browser-native primitives rather than hand-rolled scroll math. For pages where readers expand and collapse long sections rather than scrolling through everything, the Read More Expand snippet pairs naturally with this pattern.