BackTop 回到顶部

返回页面顶部的操作按钮，支持自定义样式和位置。在页面滚动到指定位置时显示。

代码示例

				
<template>
	<zk-theme type="page" :padding="30" showBack navbarTitle="backTop返回顶部">
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0" v-for="item in 100" :key="item">
			<zk-text :text="`Item ${item}`" align="center" />
		</zk-theme>
 
		<zk-back-top ref="backTop" :visibility-height="300" :right="20" :bottom="20" @click="onBackTopClick" />
	</zk-theme>
</template>

<script>
	export default {
		methods: {
			onBackTopClick() {
				console.log('Back to top clicked')
			}
		},
		onPageScroll(e) {
			if (this.$refs.backTop) {
				this.$refs.backTop.handlePageScroll(e.scrollTop)
			}
		}
	}
</script>

<style lang="scss">

</style>

API

Props 属性

参数 说明 类型 默认值
visibilityHeight 滚动高度达到此参数值才出现 number 400
right 距离页面右边距（单位：rpx） number 40
bottom 距离页面底部距离（单位：rpx） number 100
duration 回到顶部所需时间（单位：ms） number 300
contentRef 内容区域的引用对象（仅 NVUE 环境需要） object null

Events 事件

事件名 说明 回调参数
click 点击按钮时触发 event: Event

样式指南

默认样式说明：

最佳实践

1. 基础使用

<zk-back-top ref="backTop" />

2. NVUE 环境使用

<list ref="listRef">
       <zk-back-top ref="backTop" :content-ref="$refs.listRef" />
   </list>

3. 自定义样式

<zk-back-top :right="60" :bottom="160">
       <view class="custom-back-top">
           <text>TOP</text>
       </view>
   </zk-back-top>