VelinStyle Scroll to top
Add <velin-scroll-top> once per page. It appears after scrolling past a threshold and scrolls smoothly to the top (respects prefers-reduced-motion).
Declarative attribute
Without a custom element in markup, set velin-scroll-top on <body> (or any element). Requires bootFromDOM(document, { attributes: true }) or bootAttributes():
<body velin-scroll-top="400">
...
</body>Basic
Scroll this page to see the button in the lower corner.
<velin-scroll-top threshold="300"></velin-scroll-top>Attributes
| Attribute | Default | Notes |
|---|---|---|
threshold | 300 | Scroll offset (px) before the button is shown |
Styling
Position via CSS variables on :host:
velin-scroll-top {
--velin-scroll-top-bottom: 1.5rem;
--velin-scroll-top-end: 1.5rem;
}Accessibility
- Fixed
aria-label="Scroll to top"on the control. - Uses
scroll-behavioronly when reduced motion is off.