Scroll to Top

Demo & usage

More examples

<sv-scroll-to-top [threshold]="300" variant="pill" position="bottom-right" [showProgress]="true" label="Top" />

<sv-scroll-to-top appearance="glass" variant="circle" position="bottom-right" />

<sv-scroll-to-top appearance="gradient" variant="pill" label="Top" />

<div class="relative h-80 overflow-hidden">
  <div #panel class="h-full overflow-y-auto"><!-- …content… --></div>
  <sv-scroll-to-top [scrollTarget]="panel" [contained]="true" [threshold]="120" />
</div>

<sv-scroll-to-top [focusTarget]="true" />
<sv-scroll-to-top focusTarget="#main-title" />

<sv-speed-dial [actions]="actions" floating="bottom-right" />
<sv-scroll-to-top position="bottom-right" />

When to use

• Helping users return to the top of long, scroll-heavy pages.
• Articles, feeds, documentation and dashboards with deep content.
• Inside a scrollable panel, drawer or card via `contained` + `scrollTarget`.
• For short pages it adds clutter — skip it.

Async states

None — this component has nothing to load, so it has no loading, empty or error state to drive.

Outputs

Customization & theming

• Circle, rounded or pill shapes.
• Four premium appearances: solid, glass, gradient, outline — composable with any shape.
• Progress ring recolours itself to match the appearance.
• Viewport-fixed or `contained` inside a scrollable panel/drawer.
• Configurable show threshold.
• Shows live scroll progress.
• Customisable button name via `ariaLabel`.
• Floating layer: in the viewport-fixed mode the button joins the shared floating layer while it is shown (`floatingOrder`, default 20 — above a Speed Dial at 10), so it stacks clear of a FAB, affixed blocks and any region the host registers (chat, cookie banner, bottom nav), plus the device safe-area inset. Hidden, contained and demo buttons register nothing.
• `scrollBehavior`: `smooth` (default) or `auto`. Smooth is downgraded to an instant jump under `prefers-reduced-motion`, read at click time.
• `focusTarget`: `true` focuses `main h1`, else the first `h1`, else the first heading, inside the scroll root; a string is a CSS selector. A non-focusable target gets `tabindex="-1"`; focus moves with `preventScroll` so the scroll is not cut short. An invalid selector warns in dev mode and leaves focus alone. Unset, focus moves only when the button itself holds it (see Accessibility).
• Variant axes: `variant` (circle, rounded, pill) and `appearance` (solid, glass, gradient, outline) are appearance; `showProgress`, `contained`, `scrollBehavior` and `focusTarget` are behavioural modes. The progress ring draws only on circle and rounded — pill has no room for it. Every appearance survives forced colors with a ButtonText edge; glass and gradient lose their surface there by design.
• Scroll roots and containing blocks (X-9): `scrollTarget` wins, else the nearest scrollable ancestor, else the window. The floating layer is viewport-level, so `contained` buttons do not register. The fixed button is not portalled: an ancestor with `transform`, `filter`, `perspective`, `backdrop-filter`, `contain` or `container-type` becomes its containing block, so it pins to that ancestor instead of the viewport — keep it outside animated or filtered wrappers.
• Browser limits: safe-area insets only apply with `viewport-fit=cover`; smooth scrolling is ignored by browsers without `scroll-behavior` support (the jump is instant); iOS's virtual keyboard can cover a fixed button.

Best practices

• Do: Set a `threshold` so the button only appears after meaningful scrolling.
• Do: Keep it out of the tab order until visible (handled).
• Tip: Treat `showProgress` as a visual hint only — the ring is decorative and has no text equivalent, so it is not a reading-progress indicator.
• Do: Set `focusTarget` on long pages so keyboard and screen-reader users land at the top too, not only the viewport.
• Tip: A host chat launcher or cookie banner in the same corner should register with `SvFloatingLayerService`; the button then stacks clear of it.
• Tip: Sharing a corner with a Speed Dial (X-5): the button can only stack clear of a dial that registered. A default `<sv-speed-dial>` is host-positioned and registers nothing, so set its `floating` input to the shared corner — otherwise the two overlap.

Accessibility

• Labelled button (`ariaLabel`) that scrolls the page to the top.
• Disabled, aria-hidden and removed from the tab order until it becomes visible.
• Focus after scrolling (X-10): with `focusTarget` unset, focus that is elsewhere is left alone (a mouse click in Safari never focuses the button). But if the button itself holds focus when it is activated or hides, focus is never stranded on a control that just became `aria-hidden`: it moves to the page's main heading (as `focusTarget: true`), else to `main` / `[role="main"]`, made `tabindex="-1"`, else it is released to the document. A `demo` button never hides, so it keeps focus. An explicit `focusTarget` always wins.
• Forced colors (X-7): the focus ring is a box shadow, which forced colors removes, so every shape and appearance also draws a system-coloured focus outline in that mode.
• Reduced motion: no smooth scroll, and the show/hide and ring transitions are stilled.
• The progress ring is decorative (`aria-hidden`) and has no text equivalent — it is not a reading-progress indicator for assistive tech.