Backtop
A button that scrolls back to the top when clicked. Appears after scrolling past a threshold. Supports progress ring, sizes, shapes, and more.
Basic
Scroll down inside the box to see the backtop button appear.
Scroll down
Line 1 — Lorem ipsum dolor sit amet consectetur.
Line 2 — Lorem ipsum dolor sit amet consectetur.
Line 3 — Lorem ipsum dolor sit amet consectetur.
Line 4 — Lorem ipsum dolor sit amet consectetur.
Line 5 — Lorem ipsum dolor sit amet consectetur.
Line 6 — Lorem ipsum dolor sit amet consectetur.
Line 7 — Lorem ipsum dolor sit amet consectetur.
Line 8 — Lorem ipsum dolor sit amet consectetur.
Line 9 — Lorem ipsum dolor sit amet consectetur.
Line 10 — Lorem ipsum dolor sit amet consectetur.
Line 11 — Lorem ipsum dolor sit amet consectetur.
Line 12 — Lorem ipsum dolor sit amet consectetur.
Line 13 — Lorem ipsum dolor sit amet consectetur.
Line 14 — Lorem ipsum dolor sit amet consectetur.
Line 15 — Lorem ipsum dolor sit amet consectetur.
Line 16 — Lorem ipsum dolor sit amet consectetur.
Line 17 — Lorem ipsum dolor sit amet consectetur.
Line 18 — Lorem ipsum dolor sit amet consectetur.
Line 19 — Lorem ipsum dolor sit amet consectetur.
Line 20 — Lorem ipsum dolor sit amet consectetur.
vue
<VxBacktop />Progress Ring
Show a circular progress indicator around the button with show-progress.
Scroll to see progress ring fill
Line 1 — Watch the ring fill as you scroll.
Line 2 — Watch the ring fill as you scroll.
Line 3 — Watch the ring fill as you scroll.
Line 4 — Watch the ring fill as you scroll.
Line 5 — Watch the ring fill as you scroll.
Line 6 — Watch the ring fill as you scroll.
Line 7 — Watch the ring fill as you scroll.
Line 8 — Watch the ring fill as you scroll.
Line 9 — Watch the ring fill as you scroll.
Line 10 — Watch the ring fill as you scroll.
Line 11 — Watch the ring fill as you scroll.
Line 12 — Watch the ring fill as you scroll.
Line 13 — Watch the ring fill as you scroll.
Line 14 — Watch the ring fill as you scroll.
Line 15 — Watch the ring fill as you scroll.
Line 16 — Watch the ring fill as you scroll.
Line 17 — Watch the ring fill as you scroll.
Line 18 — Watch the ring fill as you scroll.
Line 19 — Watch the ring fill as you scroll.
Line 20 — Watch the ring fill as you scroll.
vue
<VxBacktop show-progress />Scroll Percentage
Show the scroll percentage inside the button with show-percent. Combines well with show-progress.
Percentage + progress ring
Line 1 — Scroll to see the percentage.
Line 2 — Scroll to see the percentage.
Line 3 — Scroll to see the percentage.
Line 4 — Scroll to see the percentage.
Line 5 — Scroll to see the percentage.
Line 6 — Scroll to see the percentage.
Line 7 — Scroll to see the percentage.
Line 8 — Scroll to see the percentage.
Line 9 — Scroll to see the percentage.
Line 10 — Scroll to see the percentage.
Line 11 — Scroll to see the percentage.
Line 12 — Scroll to see the percentage.
Line 13 — Scroll to see the percentage.
Line 14 — Scroll to see the percentage.
Line 15 — Scroll to see the percentage.
Line 16 — Scroll to see the percentage.
Line 17 — Scroll to see the percentage.
Line 18 — Scroll to see the percentage.
Line 19 — Scroll to see the percentage.
Line 20 — Scroll to see the percentage.
vue
<VxBacktop show-progress show-percent />Sizes
Three sizes: small (32px), default (40px), large (48px).
small
Line 1
Line 2
Line 3
Line 4
Line 5
Line 6
Line 7
Line 8
Line 9
Line 10
Line 11
Line 12
Line 13
Line 14
Line 15
default
Line 1
Line 2
Line 3
Line 4
Line 5
Line 6
Line 7
Line 8
Line 9
Line 10
Line 11
Line 12
Line 13
Line 14
Line 15
large
Line 1
Line 2
Line 3
Line 4
Line 5
Line 6
Line 7
Line 8
Line 9
Line 10
Line 11
Line 12
Line 13
Line 14
Line 15
vue
<VxBacktop size="small" />
<VxBacktop size="default" />
<VxBacktop size="large" />Shape
Choose between circle (default) and square (rounded square).
circle
Line 1
Line 2
Line 3
Line 4
Line 5
Line 6
Line 7
Line 8
Line 9
Line 10
Line 11
Line 12
Line 13
Line 14
Line 15
square
Line 1
Line 2
Line 3
Line 4
Line 5
Line 6
Line 7
Line 8
Line 9
Line 10
Line 11
Line 12
Line 13
Line 14
Line 15
vue
<VxBacktop shape="circle" />
<VxBacktop shape="square" />Tooltip
Add a native tooltip with the tooltip prop.
Hover the button to see the tooltip
Line 1 — Content here.
Line 2 — Content here.
Line 3 — Content here.
Line 4 — Content here.
Line 5 — Content here.
Line 6 — Content here.
Line 7 — Content here.
Line 8 — Content here.
Line 9 — Content here.
Line 10 — Content here.
Line 11 — Content here.
Line 12 — Content here.
Line 13 — Content here.
Line 14 — Content here.
Line 15 — Content here.
Line 16 — Content here.
Line 17 — Content here.
Line 18 — Content here.
Line 19 — Content here.
Line 20 — Content here.
vue
<VxBacktop tooltip="Back to top" />Scroll To Element
Scroll to a specific element instead of the top using scroll-to.
Target section
Line 1 — Scroll down, button scrolls back here.
Line 2 — Scroll down, button scrolls back here.
Line 3 — Scroll down, button scrolls back here.
Line 4 — Scroll down, button scrolls back here.
Line 5 — Scroll down, button scrolls back here.
Line 6 — Scroll down, button scrolls back here.
Line 7 — Scroll down, button scrolls back here.
Line 8 — Scroll down, button scrolls back here.
Line 9 — Scroll down, button scrolls back here.
Line 10 — Scroll down, button scrolls back here.
Line 11 — Scroll down, button scrolls back here.
Line 12 — Scroll down, button scrolls back here.
Line 13 — Scroll down, button scrolls back here.
Line 14 — Scroll down, button scrolls back here.
Line 15 — Scroll down, button scrolls back here.
Line 16 — Scroll down, button scrolls back here.
Line 17 — Scroll down, button scrolls back here.
Line 18 — Scroll down, button scrolls back here.
Line 19 — Scroll down, button scrolls back here.
Line 20 — Scroll down, button scrolls back here.
vue
<VxBacktop scroll-to="#my-section" />Custom Content
Use the default slot for custom content. The slot exposes percent.
Custom slot with percentage
Line 1 — Content.
Line 2 — Content.
Line 3 — Content.
Line 4 — Content.
Line 5 — Content.
Line 6 — Content.
Line 7 — Content.
Line 8 — Content.
Line 9 — Content.
Line 10 — Content.
Line 11 — Content.
Line 12 — Content.
Line 13 — Content.
Line 14 — Content.
Line 15 — Content.
Line 16 — Content.
Line 17 — Content.
Line 18 — Content.
Line 19 — Content.
Line 20 — Content.
vue
<VxBacktop show-progress size="large">
<template #default="{ percent }">
<span>{{ percent }}%</span>
</template>
</VxBacktop>Full Custom Button
Use the #button slot to replace the entire button. It receives { percent, visible, scroll, style } — call scroll($event) to trigger the scroll, apply style for positioning.
Fully custom button via #button slot
Line 1
Line 2
Line 3
Line 4
Line 5
Line 6
Line 7
Line 8
Line 9
Line 10
Line 11
Line 12
Line 13
Line 14
Line 15
Line 16
Line 17
Line 18
Line 19
Line 20
vue
<VxBacktop>
<template #button="{ percent, scroll, style }">
<div :style="style" @click="scroll">
Back to top · {{ percent }}%
</div>
</template>
</VxBacktop>Disabled
Button is visible but disabled
Line 1
Line 2
Line 3
Line 4
Line 5
Line 6
Line 7
Line 8
Line 9
Line 10
Line 11
Line 12
Line 13
Line 14
Line 15
Line 16
Line 17
Line 18
Line 19
Line 20
vue
<VxBacktop disabled />Auto Hide
Hide after idle time (ms). The button reappears when you scroll again.
vue
<!-- Hide after 3 seconds of no scrolling -->
<VxBacktop :auto-hide="3000" />API
VxBacktop Props
| Prop | Type | Default | Description |
|---|---|---|---|
target | string | HTMLElement | window | Scroll container |
visibility-height | number | 200 | Scroll threshold to show (px) |
right | number | 40 | Right offset (px) |
bottom | number | 40 | Bottom offset (px) |
smooth | boolean | true | Smooth scroll animation |
size | 'small' | 'default' | 'large' | 'default' | Button size |
shape | 'circle' | 'square' | 'circle' | Button shape |
show-progress | boolean | false | Show circular scroll progress ring |
show-percent | boolean | false | Show scroll percentage text |
scroll-to | string | — | CSS selector to scroll to instead of top |
tooltip | string | — | Native tooltip text |
disabled | boolean | false | Disable the button |
auto-hide | number | 0 | Auto-hide after idle (ms), 0 = off |
root-class | string | string[] | object | — | Class on root element |
Events
| Event | Payload | Description |
|---|---|---|
click | MouseEvent | Button clicked |
Slots
| Slot | Props | Description |
|---|---|---|
default | { percent: number } | Custom inner content (replaces icon) |
button | { percent: number, visible: boolean, scroll: Function, style: object } | Replace the entire button. Use style for positioning, call scroll($event) to trigger scroll. |
Exposed
| Name | Type | Description |
|---|---|---|
visible | Ref<boolean> | Whether the button is visible |
scrollPercent | Ref<number> | Current scroll percentage (0–100) |