layui/example/docs/zh-CN/components/backtop.md

::: anchor :::

::: title 基本介绍 :::

::: describe 当用户需要频繁返回顶部查看相关内容时。 :::

::: title 基础使用

::: ::: demo 回到顶部组件的默认样式，lay-backtop 会自动寻找最近的可滚动祖先元素，也可以使用 target 属性指定触发滚动事件的元素，通过滑动来查看页面右下角的正方形按钮。

<script> </script>

:::

:::title 自定义

::: demo 回到顶部组件可自定义样式，限制宽高：50px * 50px，showHeight = 0 将始终显示，disabled 属性禁用返回顶部。查看页面右下角的圆形按钮。

<script> import { ref } from 'vue' import { layer } from "@layui/layer-vue" export default { setup() { const handlerClick = () => { layer.msg("layui-vue", { time: 1000 }); } return { handlerClick, } } } </script>

:::

::: title 挂载容器

::: ::: demo 通过设置 target 和 position="absolute" 参数，可对特定容器进行返回顶部操作

内容

<script> export default { setup() { return { } } } </script>

:::

::: title 属性 :::

::: table

属性	描述	类型	默认值	可选值
target	可选，触发滚动事件的对象	string | Window	window	CSS/Element 选择器 window
showHeight	可选，滚动高度达到该值后 显示回到顶部按钮	number	200	—
disabled	可选，禁用点击返回顶部	boolean	false	true false
position	可选，定位方式，特定容器内部 需设置为 absolute	string	fixed	absolute fixed
right	可选，按钮距离页面右边距	number	30	—
size	可选，按钮大小	string	——	medium small
bottom	可选，按钮距离页面底部位置	number	40	40
bgcolor	可选，背景颜色	string	#9F9F9F	—
opacity	可选，不透明度	number	0.95	0-1
color	可选，前景颜色	string	#FFFFFF	—
borderRadius	可选，添加圆角	number | string	2	e: 2 | 2px |50%
circle	可选，使用圆形按钮	boolean	false	true false
icon	可选，图标类型	string	layui-icon-top	lay-icon组件支持的所有类型
iconSize	可选，图标大小	number	30	30
iconColor	可选，图标颜色	string	#FFFFFF	—

:::

::: title Backtop 事件 :::

::: table

事件	描述	参数
click	点击回到顶部按钮的回调函数	event

:::

::: title Backtop 插槽 :::

::: table

插槽	说明
default	自定义内容

:::

::: previousNext backtop :::