Anchor
Tracks the current section on scroll and highlights it automatically; clicking an anchor smooth-scrolls to the target.
Basic usage
Scroll spy
Chapter 1
Section 1 content: demonstrates scroll spy and highlight tracking.
Chapter 2
When scrolled into view, the left anchor highlights automatically.
Chapter 3
Click an anchor to smooth-scroll to the corresponding section.
Highlight offset
Highlight offset (offset)
Chapter 1
offset controls the offset of the top highlight detection zone.
Chapter 2
Scroll to observe the difference between the highlight switch point and the default.
Click event
Click event
Chapter 1
Click the left anchor to see the event output.
Chapter 2
The event detail carries the target href.
Controlled highlight
active is a controlled attribute: an external set/remove of active directly controls the currently highlighted item (the scroll spy still takes over as you scroll).
Controlled active
Chapter 1
Click a left button to set active; the anchor highlights the corresponding item immediately.
Chapter 2
When scrolling this container, the scroll spy takes over highlighting.
Chapter 3
"Clear highlight" removes active, restoring the no-highlight state.
API
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
active | Currently highlighted href | string | — |
items | Anchor items JSON | AnchorItem[] | string | [] |
offset | Highlight offset in px | string | 0 |
Events
| Event | Description |
|---|---|
oas-change | An anchor was clicked, detail: { href } |
Scroll spy based on IntersectionObserver; clicking smooth-scrolls to the target; nav + aria-label="锚点导航", the current item has aria-current="true".