Scroll-Anchored Table of Contents

Rather than a static list of jump links, this table of contents tracks scroll position against each section’s own height and fills a progress bar per entry, so the reader sees not just which section they’re in but how far through it they are. Built with vanilla JavaScript (scroll-position math per section, no IntersectionObserver library) and CSS transitions for the fill animation.

Long-form content and documentation both share the same failure mode: readers lose their place and can’t tell how much is left, which is a real driver of bounce on long pages. My conclusion: per-section progress reads as more trustworthy than a single top-of-page bar because it maps directly to the outline the reader already has in mind, making this a pattern worth reusing on docs sites or knowledge bases where “how much further” is a genuine reader question, not just a nice-to-have.

Product

The Table of Contents That Reads Along With You

A static outline tells you what a piece covers. A scroll-anchored one tells you how far you've gotten into each part of the argument.

By A. Reporter · August 2, 2026 · 6 min read

The outline as a promise

A table of contents has always made a promise: here is the shape of what you're about to read, and here is roughly how long each part will take. What it has never done is keep that promise updated as you go.

Once you start reading, the outline freezes. It knows what the piece contains, but it has no idea where you are inside it, so it can't tell you anything more useful than a static map of a city you're already walking through.

That gap is what this experiment tries to close: an outline that keeps observing you instead of just describing the piece once and stepping back.

Sections as containers, not checkpoints

Most reading-progress bars measure the whole page at once, a single strip that fills from 0 to 100 percent. That's honest about total length, but it collapses every section into the same undifferentiated blur.

Here, each entry in the table of contents tracks its own section independently: how far the scroll position has moved through that section's own height, not the page's. A short section fills quickly; a long one fills slowly, exactly as reading it would feel.

The result is less a progress bar and more a live table of how much of each argument you've actually taken in.

Try it

Scroll through this article and watch the panel on the left. The current section highlights, and its fill bar tracks your position within it. Finish a section and its bar settles at full, a small, quiet record of what's behind you.

Click any entry to jump straight to that section. The scroll and the outline stay in sync in both directions, so the map is never lying about where you are.

What's still unresolved

The open question is whether this is actually useful, or just a more elaborate scrollbar. A progress indicator only earns its place if it changes reading behavior: helping people gauge remaining effort, or return to where they left off, rather than becoming one more ambient animation to ignore.