Backtop 返回顶部

任意容器返回顶部。常见于项目需要返回顶部时。

基础用法

• 当指定 target 时，组件会对其滚动事件做监听，值可以是 id 或者 class。
• 不指定 target 时，组件默认会从组件调用位置开始向上查找到最近的滚动元素。
• 组件默认会渲染在 body 下，可以设置 popperAppendToBody 关闭或者打开。

<template>
	<gov-backtop />
</template>

自定义显示

通过默认插槽可以自定义一个返回顶部。

<template>
	<gov-backtop bottom="100">
		<div class="gov-demo-backtop__custom">
			<img src="./top.png" alt="返回顶部" />
		</div>
	</gov-backtop>
</template>

更多拓展

如果你有更多自定义，例如你需要一个咨询按钮和返回并排，你也可以在咨询按钮标签上设置 @click.stop 来阻止冒泡，仅把 Backtop 当做一个容器。

Attributes

参数	类型	默认值	描述
visibilityHeight	Number	200	滚动时触发显示回到顶部按钮的高度，单位 px。
target	String	""	指定滚动的目标元素，可以是 CSS 选择器或元素 ID。如不设置，则默认从组件调用位置开始，向上查找第一个滚动元素。
right	Number / String	40	回到顶部按钮距离页面右侧的距离，支持数字和字符串（如 40 , '40px'）。
bottom	Number / String	40	回到顶部按钮距离页面底部的距离，支持数字和字符串（如 40 , '40px'）。
zIndex	Number	2000	回到顶部按钮的 z-index 层级。
appendToBody	Boolean	true	是否将组件挂载到 body 上。

Events

事件名	说明
backtop	点击返回顶部事件。

Slots

插槽	说明
default	自定义返回顶部的内容显示。