Provide a responsive floating control that returns long pages to the top and can show scroll progress.
Change any prop and inspect the server-rendered component immediately.
<BackToTop
label="Back To Top"
ariaLabel="Back To Top 1 example"
showProgress="true"
showLabel="true"
/>Compare configurations and resize the browser to check responsive behavior.
Return visitors to the top of a long page after the scroll threshold is reached.
<BackToTop
label="Back To Top"
ariaLabel="Back To Top 1 example"
showProgress="true"
showLabel="true"
alwaysVisible="true"
/>Show a visible text label when the action needs extra clarity.
<BackToTop
ariaLabel="Back To Top 2 example"
icon="icon-[lucide--arrow-right]"
showProgress="true"
showLabel="true"
alwaysVisible="true"
size="sm"
variant="soft"
shape="pill"
/>Display page scroll progress around the floating control on long articles or directories.
<BackToTop
label="Advanced example"
ariaLabel="Back To Top 3 example"
icon="icon-[lucide--trash-2]"
position="left"
offset="lg"
showProgress="true"
showLabel="true"
alwaysVisible="true"
size="lg"
variant="outline"
/>All content and behavior shown above is supplied through these props and slots.
| Prop | Type | Default | Required |
|---|---|---|---|
threshold | number | 500 | No |
label | string | "Back to top" | No |
ariaLabel | string | "Scroll back to top" | No |
icon | string | "icon-[lucide--arrow-up]" | No |
position | string | "right" | No |
offset | string | "md" | No |
behavior | string | "smooth" | No |
showProgress | boolean | false | No |
showLabel | boolean | false | No |
alwaysVisible | boolean | false | No |
size | string | "default" | No |
color | string | "primary" | No |
variant | string | "solid" | No |
shape | string | "round" | No |
class | string | "" | No |