Live demo — this example is server-driven; run the showcase locally for the interactive version.
Back to top
Use Back to top straight from a Qute template — parameters and slots instead of Java builders. This reference is generated
from the runtime template sources: each template documents its parameters and slots in the header comment shown
beneath its include line.
Back to top — PatternFly v6
A sticky-positioned button that appears once the user has scrolled past 400px
and smooth-scrolls back to top on click. Alpine.js handles visibility +
interaction via the phaBackToTop component.
Parameters:
id (optional) — DOM id on the container; omit unless something
else references it.
title (optional) — button label text (default: "Back to top").
alwaysVisible (optional) — boolean; skip the scroll threshold and keep
the button visible.
scrollableSelector (optional) — CSS selector for a scrollable element to spy
on instead of window scroll. The button also
scrolls THAT element back to 0 on click.
classes (optional) — extra classes on the container, e.g. a
z-index helper like ws-back-to-top.
Model mode: pass backToTop=<...model.BackToTop> — the phaBackToTop args are generated in Java.