Back to Top
The `<pura-back-to-top>` is a round button fixed in the bottom-right corner that fades in when the page (or a target container) is scrolled past a threshold and, on click, smoothly scrolls back to the top while respecting prefers-reduced-motion. Use it on long pages (articles, lists, docs) for an accessible return shortcut. It has an agent-native layer: it reflects live state in `data-pura-back-to-top-*` attributes (visible/hidden, current offset, threshold) and registers each instance in `window.__puraBackToTop` by `data-pura-id`, letting agents enumerate the buttons and call `.toTop()` to drive the scroll programmatically.
Preview
<pura-back-to-top offset="300" label="Back to top"></pura-back-to-top>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
offset | number | 400 | Scroll distance in px before the button appears. |
label | string | Back to top | Accessible label (aria-label) of the icon button. |
target | string | (page) | CSS selector of the scroll container to observe and scroll. If absent: uses the page scroll (window). |
disabled | boolean | false | Makes the button non-interactive and keeps it hidden. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/back-to-top.js"></script>import "./pura/lib/back-to-top.js";