Navigation
Back to Top
A button that appears once you scroll down and takes you back to the top. It floats in a corner of the screen.
ReactVueWeb Components
View in Storybook Playground
Examples
<BackTop label="トップへ戻る" />Props
| Name | Type | Default | Description |
|---|---|---|---|
visibilityHeight | number | 400 | Scroll distance (px) before the button appears. @default 400 |
label | string | Back to top | Accessible label. @default 'Back to top' |
children | ReactNode | — | Custom icon (defaults to an up arrow). |
Accessibility
- Body/background contrast is ≥ 7:1 (AAA) in both light and dark.
- Every interaction works with the keyboard alone.
- The focus ring is always visible.
- Respects prefers-reduced-motion and stops excessive motion.
Every component is designed to meet WCAG 2.1 AAA.