Skip to content

BackTop Back to Top

A floating "back to top" button for long pages. Automatically shows when scroll exceeds threshold, smoothly scrolls to top on click.

Cross-platform: On H5, listens to window scroll events; on mini-program / App, uses uni.onPageScroll page-level lifecycle. Both platforms use requestAnimationFrame throttling to avoid high-frequency updates.

Basic Usage

vue
<template>
  <see-backtop />
</template>

Custom Position

vue
<template>
  <see-backtop :right="50" :bottom="100" />
</template>

Custom Icon

vue
<template>
  <see-backtop>
    <view class="custom-btn">
      <text>TOP</text>
    </view>
  </see-backtop>
</template>

Props

PropertyTypeDefaultDescription
visibilityHeightnumber200Show threshold (px), button shows when scroll exceeds this value
rightnumber20Distance from right edge (px)
bottomnumber80Distance from bottom edge (px)
zIndexnumber999z-index
durationnumber300Scroll animation duration (ms)
targetstring''Target scroll container selector (reserved field, current implementation tracks page/window scroll)
isCustombooleanfalseWhether to use custom slot

Events

EventParametersDescription
onClick-Click event

Slots

Slot NameDescription
defaultCustom button content

Liao ICP No. 2025070134