Start free trial

Interactive Scrollspy Rail Needs plugin

The Scrollspy Rail block

A native block section whose sticky index follows the reader through named content sections. Each top-level Group becomes a section, its first heading supplies the link label, and ordinary anchor links remain useful without JavaScript.

SubscribeThe 3 designs
Case scrollspy anatomy·Twenty Twenty-FivePlays best in its own window

Open in its own window Rendered by WordPress in Twenty Twenty-Five.Open this pattern

3 patterns3 designs7 settingspatternpaste/scrollspy-railRequires a block theme on WordPress 6.7 to 7.0. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type.

The designs

3 patterns, 3 designs between them. Each is this one block wrapped in core blocks, so everything around it takes its colours, spacing and type from your theme.

All 36 interactive patterns

Case scrollspy anatomy rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveEditorialEditorialNeeds plugin

Case scrollspy anatomy

A case study told as a photo essay: a compact masthead, then four sections that each open on a large captioned photograph and several paragraphs of story, ending in a results ledger.

7 blocksOpen preview
Handbook scrollspy directory rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveSingle articlesSingle articlesNeeds plugin

Handbook scrollspy directory

A reference directory: twelve entries in a narrow reading column beside a wide, unnumbered index of their titles that stays in view and marks the entry being read.

6 blocksOpen preview
Services scrollspy index rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveFeaturesFeaturesNeeds plugin

Services scrollspy index

A text-led services section with a narrow numbered index beside five generous service chapters.

8 blocksOpen preview

How it moves

A sticky contents rail for substantial pages, built from ordinary Group, Heading, Paragraph, Image and Table blocks. The first heading in each section names its anchor, so the editor stays recognisably WordPress and the saved content remains readable if the companion plugin is removed.

What you can set before you copy

Every one of these is an attribute of the block, so it is the same control the editor's inspector offers after you have pasted. The Motion drawer on a pattern's own page writes your values into the markup before you copy it.

SettingAttributeValuesDefault
Track the current sectionpatternpasteMotionOn or offOn
Number the sectionspatternpasteNumberedOn or offOn
Show reading progresspatternpasteProgressOn or offOn
Reading linepatternpasteLine20 to 80%, in steps of 136%
Index widthpatternpasteRailWidth160 to 360px, in steps of 4240px
Index gappatternpasteGap24 to 120px, in steps of 464px
Sticky offsetpatternpasteStick0 to 160px, in steps of 432px
Back to the interactive patterns