Scroll to Top
A floating button that appears once the page has been scrolled, and returns it to the top. It renders nothing below the threshold, watches the document or a panel you name, and honours a request for reduced motion.
Built on the FAB
FabVariant.Surface rather than Primary, and FabSize.Small rather than Default.
Watching a Panel
Fixed="false" pins the button to the nearest positioned ancestor rather than the viewport.
Put the button beside the scrolling element inside a relative wrapper, not inside the scroller —
inside, it is positioned against the scrolled content and slides out of view with it.
Appearance
Placement is logical, so BottomStart is the bottom left in a left-to-right layout and the bottom right in a right-to-left one.
Custom Icon and Callback
ChildContent replaces the default "arrow-up" icon. An icon-only button needs a name, so set
AriaLabel when the icon changes what the button means. OnScrolledToTop runs after the scroll,
and is skipped if the interop call threw.
Behaviour
Renders nothing until visible. Below the threshold the component produces no markup at all, so it costs no space on a short page and cannot cover content there is no reason to scroll away from.
Watching a panel. With a Selector, the named element's scroll position drives visibility
and that element is what gets scrolled. Without one, the document is used for both.
Reduced motion wins. Smooth is ignored when the browser reports that the visitor has
asked for reduced motion.
Prerendering is safe. The JavaScript module is loaded on first render inside a try/catch.
During prerendering, or on a circuit that has gone away, the load fails quietly and the button simply stays hidden.
The component is IAsyncDisposable and tells the module to stop observing.