Back To Top

RzBackToTop renders a floating action that appears after crossing a scroll threshold and uses Alpine to smoothly return the viewport to the top.

Basic Usage

The default button appears after Threshold pixels of scroll.

Scroll down to reveal the floating button.

Source

<div class="relative min-h-[150vh] p-8">
    <RzBackToTop />
</div>

Property	Description	Type	Default
`ChildContent`	Optional content. If omitted, the component renders an arrow icon.	`RenderFragment?`	`null`
`Threshold`	Scroll offset in pixels before showing the control.	`int`	`300`
`Variant`	Applies theme color styling.	`ThemeVariant`	`ThemeVariant.Default`
`Size`	Controls button and icon sizing.	`Size`	`Size.Medium`
`Outline`	Applies outline styling as a compound variant.	`bool`	`false`
`AriaLabel`	Accessible label for assistive technology.	`string?`	`"Back to top"`
`AsChild`	Merges behavior and classes onto a supplied child element.	`bool`	`false`

The interactive behavior is powered by Alpine data component rzBackToTop.

Member	Type	Description
`visible`	`bool`	Controls whether the floating action is displayed.
`threshold`	`number`	Resolved from `data-threshold`.

Method	Signature	Description
`init`	`()`	Reads threshold, binds a passive scroll listener, and performs an immediate visibility evaluation.
`scrollToTop`	`()`	Scrolls to the top using `smooth` behavior unless reduced motion is preferred.
`destroy`	`()`	Removes the window scroll listener.