B3 logoB3Docs

B3 ScrollSpy Article

Targeting & Navigation

Scope the experience to reviewed pages, refine heading discovery, and verify keyboard section navigation.

A useful ScrollSpy follows the page outline without collecting utility chrome or interfering with interaction. Configure the rollout and target list deliberately, then test both scroll and keyboard paths.

Browse docs
CoreKeyboard

Page targeting

Keep the initial rollout limited to pages you have reviewed.

Selected-page targeting is the safest starting point for a scroll-linked interface. Enable one representative page, verify its layout at desktop and mobile widths, then add other pages after their heading structure has been checked.

Heading discovery

Use heading and selector controls to build a useful section list.

The target list should reflect the page outline readers understand. Use the heading controls for the normal structure, include selectors only for intentional non-heading targets, and exclude selectors for page regions that should never participate.

Heading controls
Choose the heading levels that represent navigable sections.
Include selector
Add a deliberate target that is not covered by the normal heading selection.
Exclude selector
Remove utility or repeated headings without weakening the overall page outline.

Keyboard navigation

Move between discovered sections with the built-in modifier shortcuts.

The base runtime supports Alt/Option + Up and Down to move between tracked sections. Test both directions, confirm the first and last section behave predictably, and make sure shortcuts do not interfere while a visitor is typing or using another interactive control.