Back to Top

Try it

The element is mounted on this page. Scroll down past ~300px and a button appears pinned to the bottom-right corner — click it to smooth-scroll back up.

<esa-back-to-top></esa-back-to-top>

API

Attributes and properties:

No custom events — clicking the button scrolls the target (or window) to the top directly.

Accessibility

• Renders a native <button> with aria-label="Back to top".
• While hidden it is pointer-events: none with opacity: 0, so it isn't a click target until visible.
• Visible focus ring via the --focus-ring-* tokens; the chevron icon is aria-hidden.

Theming surface

Every public token this component reads, extracted from its source at build time, split by blast radius: the hooks that belong to this component, then the shared and system tokens it consumes alongside everything else. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.

Wired to this component

No other component reads these — re-point them and esa-back-to-top is the only thing that moves.

Shared tokens it reads

Owned by a family or by the semantic layer. Still overridable — but scope the override (esa-foo { --form-border-color: … }) unless you mean to move everything that reads it. Reach says what else that is.