Scroll to top 1.2.2

Add <velin-scroll-top> once per page. It appears after scrolling past a threshold and scrolls smoothly to the top (respects prefers-reduced-motion). Deutsch: Nach Oben Scrollen

Maturity: Documented as stable in VelinStyle 1.2.0. Design Intelligence (plan / review / agent meta) is separate and beta / foundation where noted.

When to use

A floating control to return to the top of long pages via <velin-scroll-top> or the declarative attribute.
Docs, articles, or dashboards where scroll depth is large.

When not

In-section navigation — use Scrollspy or a table of contents.
Required reading acknowledgements — do not rely on scroll-top as a completion control.

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>

See HTML attributes guide.

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;
}

Fixed aria-label="Scroll to top" on the control.
Uses scroll-behavior only when reduced motion is off.