介绍

返回页面顶部的操作按钮。

引入

通过以下方式来全局注册组件，更多注册方式请参考组件注册。

import { createApp } from 'vue';
import { BackTop } from 'vant';

const app = createApp();
app.use(BackTop);

基础用法

请滚动右侧的示例页面，当页面滚动 200px 时，右下角会出现返回顶部按钮。

<van-cell v-for="item in list" :key="item" :title="item" />

<van-back-top />

export default {
  setup() {
    const list = [...Array(50).keys()];
    return { list };
  },
};

自定义位置

通过 right 和 bottom 属性来设置组件距离右侧和底部的位置。

<van-cell v-for="item in list" :key="item" :title="item" />
<van-back-top right="15vw" bottom="10vh" />

export default {
  setup() {
    const list = [...Array(50).keys()];
    return { list };
  },
};

自定义内容

使用默认插槽来自定义组件展示的内容。

<van-cell v-for="item in list" :key="item" :title="item" />
<van-back-top class="custom">返回顶部</van-back-top>

<style>
  .custom {
    width: 80px;
    font-size: 14px;
    text-align: center;
  }
</style>

export default {
  setup() {
    const list = [...Array(50).keys()];
    return { list };
  },
};

设置滚动目标

可以通过 target 属性来设置触发滚动的目标对象，支持传入选择器或 HTMLElement。

<div class="container">
  <van-cell v-for="item in list" :key="item" :title="item" />
  <van-back-top target=".container" bottom="30vh" />
</div>

<style>
  .container {
    height: 60vh;
    overflow: auto;
  }
</style>

export default {
  setup() {
    const list = [...Array(50).keys()];
    return { list };
  },
};

瞬间滚动

当设置 immediate 属性后，页面滚动的过程不再有过渡效果，而是瞬间滚动到顶部。

<van-back-top immediate />

Props

Events

Slots

类型定义

组件导出以下类型定义：

import type { BackTopProps, BackTopThemeVars } from 'vant';

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。