Back to top
Back-to-top button for lit-material: appears after scrolling, returns to the top and moves focus there; a plain anchor without JavaScript.
- 1.8 KB gzipped
- @lit-material/back-to-top 0.1.1
- Renders on the server
Example
Back to top
Scroll down this page: past 200 pixels a button appears at the bottom corner. It scrolls back up and moves focus to this heading.
A long page…
Install
npm install @lit-material/back-to-top @lit-material/tokensimport "@lit-material/back-to-top";Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-back-to-top>
A "Back to top" button for long pages: it appears once the page has
scrolled past threshold, and takes the reader back up — smoothly, unless
they prefer reduced motion.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
threshold | threshold | number | 400 | Pixels scrolled before it appears. |
target | target | string | "" | Id of the element at the top: scrolled to and focused. Empty: the window's top. |
label | label | string | "Back to top" | |
visible | visible | boolean | false | Set while the page is scrolled past threshold; reflected. |
CSS parts
| Part | Description |
|---|---|
button | The link. |
CSS custom properties
| Property | Description |
|---|---|
--lit-material-back-to-top-inset | Distance from the viewport's bottom and end edges (default 16px). |