A plain page
Introduction
Chapterize JS watches the headings of a long page and marks the matching link in the outline as the reader moves through it. This page carries no theme at all: no fonts, no colours, no link styles. Everything you see in the outline comes from the library's opt-in marker.
The outline beside this text was generated from the headings below with a single attribute. Each heading that lacked an id received a slug, and every link points at one of them, so the outline still works as a plain table of contents without JavaScript.
Getting started
As you scroll, an activation line a quarter of the way down the viewport decides which section is current. The marker glides to the new link with an expo-out ease, and the fill on the rail grows to meet it.
Install
Readers who prefer reduced motion get the same information without the glide: the marker jumps straight to the new link, and clicking an entry scrolls instantly instead of smoothly.
Chapterize JS watches the headings of a long page and marks the matching link in the outline as the reader moves through it. This page carries no theme at all: no fonts, no colours, no link styles. Everything you see in the outline comes from the library's opt-in marker.
First run
The outline beside this text was generated from the headings below with a single attribute. Each heading that lacked an id received a slug, and every link points at one of them, so the outline still works as a plain table of contents without JavaScript.
How it decides
As you scroll, an activation line a quarter of the way down the viewport decides which section is current. The marker glides to the new link with an expo-out ease, and the fill on the rail grows to meet it.
Readers who prefer reduced motion get the same information without the glide: the marker jumps straight to the new link, and clicking an entry scrolls instantly instead of smoothly.
The activation line
Chapterize JS watches the headings of a long page and marks the matching link in the outline as the reader moves through it. This page carries no theme at all: no fonts, no colours, no link styles. Everything you see in the outline comes from the library's opt-in marker.
Fast jumps
The outline beside this text was generated from the headings below with a single attribute. Each heading that lacked an id received a slug, and every link points at one of them, so the outline still works as a plain table of contents without JavaScript.
As you scroll, an activation line a quarter of the way down the viewport decides which section is current. The marker glides to the new link with an expo-out ease, and the fill on the rail grows to meet it.
Café & crème
Readers who prefer reduced motion get the same information without the glide: the marker jumps straight to the new link, and clicking an entry scrolls instantly instead of smoothly.
Marker
Chapterize JS watches the headings of a long page and marks the matching link in the outline as the reader moves through it. This page carries no theme at all: no fonts, no colours, no link styles. Everything you see in the outline comes from the library's opt-in marker.
The outline beside this text was generated from the headings below with a single attribute. Each heading that lacked an id received a slug, and every link points at one of them, so the outline still works as a plain table of contents without JavaScript.
Light and dark
As you scroll, an activation line a quarter of the way down the viewport decides which section is current. The marker glides to the new link with an expo-out ease, and the fill on the rail grows to meet it.
Custom colours
Readers who prefer reduced motion get the same information without the glide: the marker jumps straight to the new link, and clicking an entry scrolls instantly instead of smoothly.
Limitations
Chapterize JS watches the headings of a long page and marks the matching link in the outline as the reader moves through it. This page carries no theme at all: no fonts, no colours, no link styles. Everything you see in the outline comes from the library's opt-in marker.
The outline beside this text was generated from the headings below with a single attribute. Each heading that lacked an id received a slug, and every link points at one of them, so the outline still works as a plain table of contents without JavaScript.
Changelog
As you scroll, an activation line a quarter of the way down the viewport decides which section is current. The marker glides to the new link with an expo-out ease, and the fill on the rail grows to meet it.