BackTop 回到顶部

何时使用

• 页面或容器内容较长时，提供快捷返回顶部的交互。
• 支持监听 window 或指定滚动容器，样式可通过插槽自定义。

基础用法

当页面滚动超过 visibility-height（默认 200px）时显示，点击后平滑滚动到顶部。

自定义样式

通过插槽自定义按钮内容与样式，也可通过 right、bottom 调整位置。

<template>
  <div style="height: 1200px; padding: 16px;">
    <c-backtop :right="24" :bottom="60">
      <div
        style="width:48px;height:48px;border-radius:50%;background:#409eff;color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px rgba(0,0,0,.15)"
      >
        ⬆︎
      </div>
    </c-backtop>
  </div>
</template>

指定滚动容器

设置 target 为容器的选择器（如 #scroll-box），当容器滚动超过阈值时显示并返回容器顶部。

<template>
  <div style="height: 400px;">
    <div
      id="scroll-box"
      style="height: 100%; overflow:auto; border:1px solid #e4e7ed;"
    >
      <div style="height: 1200px; padding: 8px;">容器内滚动内容…</div>
    </div>
    <c-backtop target="#scroll-box" :visibility-height="150" />
  </div>

  <!-- 也可配合自定义样式使用 -->
  <!-- <c-backtop target="#scroll-box"><span>Top</span></c-backtop> -->
</template>

API

属性名	说明	类型	可选值	默认值
target	监听的滚动容器选择器（空为 window）	string	—	''
visibility-height	达到显示的滚动高度（px）	number	—	200
right	距右侧偏移（px）	number	—	40
bottom	距底部偏移（px）	number	—	40

事件

事件名	说明	参数	返回值
click	点击按钮时触发	—	void
show	当按钮变为可见时触发	—	void
hide	当按钮隐藏时触发	—	void

插槽

插槽名	说明	作用域
default	自定义按钮内容（替换默认箭头）	—