BackTop 回到顶部

介绍

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

引入

import { createApp } from 'vue';
import { BackTop } from '@szhn/dh-design-mobile';

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

代码演示

基础用法

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

<van-cell v-for="i in 50" :key="i" :title="'单元格 ' + i" />
<van-back-top />

自定义位置

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

<van-back-top right="15" bottom="100" />

自定义内容

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

<van-back-top>
  <div class="custom-back-top">返回顶部</div>
</van-back-top>

设置滚动目标

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

<van-back-top target=".scroll-container" />

瞬间滚动

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

<van-back-top immediate />

API

Props

参数	说明	类型	默认值
target	触发滚动的目标对象，支持传入选择器或 DOM 元素，默认最近的父级滚动容器	string | HTMLElement	-
right	距离页面右侧的距离，默认单位为 px	number | string	30
bottom	距离页面底部的距离，默认单位为 px	number | string	40
offset	滚动高度达到此参数值时才显示组件	number	200
teleport	指定挂载的节点，等同于 Teleport 组件的 to 属性	string | Element	body
immediate	是否瞬间滚动到顶部	boolean	false
z-index	设置组件的 z-index 层级	number | string	100

Events

事件名	说明	回调参数
click	点击组件时触发	event: MouseEvent

Slots

名称	说明
default	自定义按钮显示内容

主题定制

样式变量

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

名称	默认值	描述
--van-back-top-size	40px	回到顶部按钮的尺寸
--van-back-top-icon-size	20px	图标的大小
--van-back-top-right	30px	按钮距右侧的距离
--van-back-top-bottom	40px	按钮距底部的距离
--van-back-top-z-index	100	按钮的层级
--van-back-top-text-color	#fff	按钮的文字颜色
--van-back-top-background	var(--van-blue)	按钮的背景色