Examples
Basic
The scroll-triggered button. Scroll past 400px to see it appear in the bottom-right; click to smooth-scroll back to top. The example fragment includes enough filler text to make scrolling meaningful.
Scroll past 400px (about a screen's worth of content) to see the back-to-top button appear in the bottom-right corner. Click it to smooth-scroll back here.
Filler paragraph 1 — Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Filler paragraph 2 — Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Filler paragraph 3 — Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Filler paragraph 4 — Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Filler paragraph 5 — Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.
Filler paragraph 6 — Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Filler paragraph 7 — Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos.
Filler paragraph 8 — Qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur.
Filler paragraph 9 — Adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat.
Filler paragraph 10 — Voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.
Documentation
Back to top props
Parameters accepted by
{#include components/navigation/back-to-top ... /}. Model mode: pass
backToTop=<BackToTop> built in Java instead — the Java tab on each example shows
the builder.
| Name | Type | Default | Description |
|---|---|---|---|
* id
|
String | — | DOM id on the container. |
title
|
String |
"Back to top"
|
Visible button label. Pair with a translated string to localise. |
alwaysVisible
|
boolean |
false
|
Skip the 400-pixel scroll threshold and keep the button visible from the start. Useful for testing or for pages where any scroll position justifies the button (e.g. an infinite list). |
scrollableSelector
|
String (CSS selector) | window | Selector for a specific scrollable element to spy on. Defaults to the window. Use when the back-to-top button should track a scrollable panel inside the page (e.g. a modal body) instead of the document scroll. |
Divergence from PF React. We skip className (React-specific). Our
alwaysVisible is PF's isAlwaysVisible — same semantic,
shorter name. The 400-pixel threshold is hardcoded; PF doesn't expose it as a prop either.
Usage
Where to place it. Render the include once near the bottom of the page's main content. PF v6's CSS
positions it fixed at the bottom-right of the viewport regardless of where it sits in
the DOM.
Scoping to a scrollable container. When your scroll happens inside a panel instead of the page
itself, pass scrollableSelector="#panel-id". The Alpine component listens to that
element's scroll events and scrolls it (not the window) back to 0 on click.
Smooth scroll behavior. The component calls
scrollTo({ top: 0, behavior: 'smooth' }). Browsers that prefer reduced motion (via
prefers-reduced-motion) automatically jump instead of animating; no extra code needed.
Focus management. After a click-to-top, focus stays on the back-to-top button. If your page expects
focus to land elsewhere (e.g. the top heading), wire an @click handler that calls
scrollToTop() and then
document.getElementById('ws-page-title').focus().