All components (204)
Back to top
Actions · BackToTop
What it is and when to use it
The scroll-up button: it appears in a corner once the page has been scrolled down, takes the page back up and moves focus to the start: to the first visible h1, or to the element whose id is given by focusTarget. It appears after the number of pixels scrolled given by from (400 by default). While it is not visible, it is not in the DOM, so it does not take up a Tab stop either.
When to use it
- Really long pages: a catalog with many rows, a guide, terms and conditions.
- Next to another floating button, inside a
FloatingGroupso they do not overlap.
When not to
- A page that fits in two screens: it adds nothing.
- To jump to a specific section:
TableOfContents, which also moves focus. - Any other floating action:
FloatingButton.
Keyboard: when it appears it is a button at the place in the DOM where it is put: at the end, which is where the keyboard expects it. Enter or Space scroll the page up and leave focus at the top, so the next Tab continues from the start and not from the middle. Only scrolling is not going back to the top.
Accessibility: it is called "Back to top" (label), or whatever text says if it should be in plain sight. Scrolling is smooth, except with reduced motion, which jumps without animation. If the target is not focusable, tabindex="-1" is set on it while it has focus and removed when it loses it.
Fine-tuning: it is an outline FloatingButton: no variables of its own; adjust it with the --amset-button-* on .amset-button-floating.
On this page, scroll down inside the frame of each story for it to appear.
What it looks like
Scroll the page: after 200 pixels, a button appears in the corner of this box that scrolls back up and leaves focus on the title. On a real page it appears in the corner of the window.
<BackToTop from={200} />Props
Import it with import { BackToTop } from '@amset/ui'. Required props are marked.
| Prop | Type | What it does |
|---|---|---|
className | string | Merged with the library classes; it does not replace them. |
corner | FloatingCorner | — |
focusTarget | string | Id of what receives focus when going up. Without it, the first `h1` on the page. Scrolling up alone leaves focus where it was and the next Tab returns to the middle of the page: that is not going back to the top. |
from | number | After how many pixels of scrolling down it appears. 400 by default. |
label | string | The name if it carries no visible text. |
size | "sm" | "md" | "lg" | — |
text | string | Visible text: then the name is this. |
It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.
In the test bench
Every state and variant, to try one at a time, on its page at ui.amset.tech: