回到顶部组件

回到顶部组件提供了一种便捷的方式让用户快速返回页面顶部，特别适用于长内容页面。

基础用法

基础的回到顶部按钮，当页面滚动超过指定高度时显示。

这是第 1 行示例文本，请向下滚动查看回到顶部按钮效果。

这是第 2 行示例文本，请向下滚动查看回到顶部按钮效果。

这是第 3 行示例文本，请向下滚动查看回到顶部按钮效果。

这是第 4 行示例文本，请向下滚动查看回到顶部按钮效果。

这是第 5 行示例文本，请向下滚动查看回到顶部按钮效果。

这是第 6 行示例文本，请向下滚动查看回到顶部按钮效果。

这是第 7 行示例文本，请向下滚动查看回到顶部按钮效果。

这是第 8 行示例文本，请向下滚动查看回到顶部按钮效果。

这是第 9 行示例文本，请向下滚动查看回到顶部按钮效果。

这是第 10 行示例文本，请向下滚动查看回到顶部按钮效果。

这是第 11 行示例文本，请向下滚动查看回到顶部按钮效果。

这是第 12 行示例文本，请向下滚动查看回到顶部按钮效果。

这是第 13 行示例文本，请向下滚动查看回到顶部按钮效果。

这是第 14 行示例文本，请向下滚动查看回到顶部按钮效果。

这是第 15 行示例文本，请向下滚动查看回到顶部按钮效果。

这是第 16 行示例文本，请向下滚动查看回到顶部按钮效果。

这是第 17 行示例文本，请向下滚动查看回到顶部按钮效果。

这是第 18 行示例文本，请向下滚动查看回到顶部按钮效果。

这是第 19 行示例文本，请向下滚动查看回到顶部按钮效果。

这是第 20 行示例文本，请向下滚动查看回到顶部按钮效果。

这是第 21 行示例文本，请向下滚动查看回到顶部按钮效果。

这是第 22 行示例文本，请向下滚动查看回到顶部按钮效果。

这是第 23 行示例文本，请向下滚动查看回到顶部按钮效果。

这是第 24 行示例文本，请向下滚动查看回到顶部按钮效果。

这是第 25 行示例文本，请向下滚动查看回到顶部按钮效果。

这是第 26 行示例文本，请向下滚动查看回到顶部按钮效果。

这是第 27 行示例文本，请向下滚动查看回到顶部按钮效果。

这是第 28 行示例文本，请向下滚动查看回到顶部按钮效果。

这是第 29 行示例文本，请向下滚动查看回到顶部按钮效果。

这是第 30 行示例文本，请向下滚动查看回到顶部按钮效果。

显示代码

自定义图标

通过设置 icon 属性可以自定义回到顶部按钮的图标。

这是第 1 行示例文本，请向下滚动查看不同图标的回到顶部按钮。

这是第 2 行示例文本，请向下滚动查看不同图标的回到顶部按钮。

这是第 3 行示例文本，请向下滚动查看不同图标的回到顶部按钮。

这是第 4 行示例文本，请向下滚动查看不同图标的回到顶部按钮。

这是第 5 行示例文本，请向下滚动查看不同图标的回到顶部按钮。

这是第 6 行示例文本，请向下滚动查看不同图标的回到顶部按钮。

这是第 7 行示例文本，请向下滚动查看不同图标的回到顶部按钮。

这是第 8 行示例文本，请向下滚动查看不同图标的回到顶部按钮。

这是第 9 行示例文本，请向下滚动查看不同图标的回到顶部按钮。

这是第 10 行示例文本，请向下滚动查看不同图标的回到顶部按钮。

这是第 11 行示例文本，请向下滚动查看不同图标的回到顶部按钮。

这是第 12 行示例文本，请向下滚动查看不同图标的回到顶部按钮。

这是第 13 行示例文本，请向下滚动查看不同图标的回到顶部按钮。

这是第 14 行示例文本，请向下滚动查看不同图标的回到顶部按钮。

这是第 15 行示例文本，请向下滚动查看不同图标的回到顶部按钮。

这是第 16 行示例文本，请向下滚动查看不同图标的回到顶部按钮。

这是第 17 行示例文本，请向下滚动查看不同图标的回到顶部按钮。

这是第 18 行示例文本，请向下滚动查看不同图标的回到顶部按钮。

这是第 19 行示例文本，请向下滚动查看不同图标的回到顶部按钮。

这是第 20 行示例文本，请向下滚动查看不同图标的回到顶部按钮。

这是第 21 行示例文本，请向下滚动查看不同图标的回到顶部按钮。

这是第 22 行示例文本，请向下滚动查看不同图标的回到顶部按钮。

这是第 23 行示例文本，请向下滚动查看不同图标的回到顶部按钮。

这是第 24 行示例文本，请向下滚动查看不同图标的回到顶部按钮。

这是第 25 行示例文本，请向下滚动查看不同图标的回到顶部按钮。

这是第 26 行示例文本，请向下滚动查看不同图标的回到顶部按钮。

这是第 27 行示例文本，请向下滚动查看不同图标的回到顶部按钮。

这是第 28 行示例文本，请向下滚动查看不同图标的回到顶部按钮。

这是第 29 行示例文本，请向下滚动查看不同图标的回到顶部按钮。

这是第 30 行示例文本，请向下滚动查看不同图标的回到顶部按钮。

显示代码

朴素样式

设置 plain 属性可以使用朴素样式的回到顶部按钮，添加背景色和边框。

这是第 1 行示例文本，请向下滚动查看朴素样式的回到顶部按钮。

这是第 2 行示例文本，请向下滚动查看朴素样式的回到顶部按钮。

这是第 3 行示例文本，请向下滚动查看朴素样式的回到顶部按钮。

这是第 4 行示例文本，请向下滚动查看朴素样式的回到顶部按钮。

这是第 5 行示例文本，请向下滚动查看朴素样式的回到顶部按钮。

这是第 6 行示例文本，请向下滚动查看朴素样式的回到顶部按钮。

这是第 7 行示例文本，请向下滚动查看朴素样式的回到顶部按钮。

这是第 8 行示例文本，请向下滚动查看朴素样式的回到顶部按钮。

这是第 9 行示例文本，请向下滚动查看朴素样式的回到顶部按钮。

这是第 10 行示例文本，请向下滚动查看朴素样式的回到顶部按钮。

这是第 11 行示例文本，请向下滚动查看朴素样式的回到顶部按钮。

这是第 12 行示例文本，请向下滚动查看朴素样式的回到顶部按钮。

这是第 13 行示例文本，请向下滚动查看朴素样式的回到顶部按钮。

这是第 14 行示例文本，请向下滚动查看朴素样式的回到顶部按钮。

这是第 15 行示例文本，请向下滚动查看朴素样式的回到顶部按钮。

这是第 16 行示例文本，请向下滚动查看朴素样式的回到顶部按钮。

这是第 17 行示例文本，请向下滚动查看朴素样式的回到顶部按钮。

这是第 18 行示例文本，请向下滚动查看朴素样式的回到顶部按钮。

这是第 19 行示例文本，请向下滚动查看朴素样式的回到顶部按钮。

这是第 20 行示例文本，请向下滚动查看朴素样式的回到顶部按钮。

这是第 21 行示例文本，请向下滚动查看朴素样式的回到顶部按钮。

这是第 22 行示例文本，请向下滚动查看朴素样式的回到顶部按钮。

这是第 23 行示例文本，请向下滚动查看朴素样式的回到顶部按钮。

这是第 24 行示例文本，请向下滚动查看朴素样式的回到顶部按钮。

这是第 25 行示例文本，请向下滚动查看朴素样式的回到顶部按钮。

这是第 26 行示例文本，请向下滚动查看朴素样式的回到顶部按钮。

这是第 27 行示例文本，请向下滚动查看朴素样式的回到顶部按钮。

这是第 28 行示例文本，请向下滚动查看朴素样式的回到顶部按钮。

这是第 29 行示例文本，请向下滚动查看朴素样式的回到顶部按钮。

这是第 30 行示例文本，请向下滚动查看朴素样式的回到顶部按钮。

显示代码

自定义位置

通过设置 bottom 和 right 属性可以自定义回到顶部按钮的位置。

这是第 1 行示例文本，请向下滚动查看不同位置的回到顶部按钮。

这是第 2 行示例文本，请向下滚动查看不同位置的回到顶部按钮。

这是第 3 行示例文本，请向下滚动查看不同位置的回到顶部按钮。

这是第 4 行示例文本，请向下滚动查看不同位置的回到顶部按钮。

这是第 5 行示例文本，请向下滚动查看不同位置的回到顶部按钮。

这是第 6 行示例文本，请向下滚动查看不同位置的回到顶部按钮。

这是第 7 行示例文本，请向下滚动查看不同位置的回到顶部按钮。

这是第 8 行示例文本，请向下滚动查看不同位置的回到顶部按钮。

这是第 9 行示例文本，请向下滚动查看不同位置的回到顶部按钮。

这是第 10 行示例文本，请向下滚动查看不同位置的回到顶部按钮。

这是第 11 行示例文本，请向下滚动查看不同位置的回到顶部按钮。

这是第 12 行示例文本，请向下滚动查看不同位置的回到顶部按钮。

这是第 13 行示例文本，请向下滚动查看不同位置的回到顶部按钮。

这是第 14 行示例文本，请向下滚动查看不同位置的回到顶部按钮。

这是第 15 行示例文本，请向下滚动查看不同位置的回到顶部按钮。

这是第 16 行示例文本，请向下滚动查看不同位置的回到顶部按钮。

这是第 17 行示例文本，请向下滚动查看不同位置的回到顶部按钮。

这是第 18 行示例文本，请向下滚动查看不同位置的回到顶部按钮。

这是第 19 行示例文本，请向下滚动查看不同位置的回到顶部按钮。

这是第 20 行示例文本，请向下滚动查看不同位置的回到顶部按钮。

这是第 21 行示例文本，请向下滚动查看不同位置的回到顶部按钮。

这是第 22 行示例文本，请向下滚动查看不同位置的回到顶部按钮。

这是第 23 行示例文本，请向下滚动查看不同位置的回到顶部按钮。

这是第 24 行示例文本，请向下滚动查看不同位置的回到顶部按钮。

这是第 25 行示例文本，请向下滚动查看不同位置的回到顶部按钮。

这是第 26 行示例文本，请向下滚动查看不同位置的回到顶部按钮。

这是第 27 行示例文本，请向下滚动查看不同位置的回到顶部按钮。

这是第 28 行示例文本，请向下滚动查看不同位置的回到顶部按钮。

这是第 29 行示例文本，请向下滚动查看不同位置的回到顶部按钮。

这是第 30 行示例文本，请向下滚动查看不同位置的回到顶部按钮。

右侧距离: 32px

底部距离: 32px

显示代码

自定义触发高度

通过设置 visibilityHeight 属性可以自定义触发回到顶部按钮显示的滚动高度。

这是第 1 行示例文本，请向下滚动查看不同触发高度的回到顶部按钮。

这是第 2 行示例文本，请向下滚动查看不同触发高度的回到顶部按钮。

这是第 3 行示例文本，请向下滚动查看不同触发高度的回到顶部按钮。

这是第 4 行示例文本，请向下滚动查看不同触发高度的回到顶部按钮。

这是第 5 行示例文本，请向下滚动查看不同触发高度的回到顶部按钮。

这是第 6 行示例文本，请向下滚动查看不同触发高度的回到顶部按钮。

这是第 7 行示例文本，请向下滚动查看不同触发高度的回到顶部按钮。

这是第 8 行示例文本，请向下滚动查看不同触发高度的回到顶部按钮。

这是第 9 行示例文本，请向下滚动查看不同触发高度的回到顶部按钮。

这是第 10 行示例文本，请向下滚动查看不同触发高度的回到顶部按钮。

这是第 11 行示例文本，请向下滚动查看不同触发高度的回到顶部按钮。

这是第 12 行示例文本，请向下滚动查看不同触发高度的回到顶部按钮。

这是第 13 行示例文本，请向下滚动查看不同触发高度的回到顶部按钮。

这是第 14 行示例文本，请向下滚动查看不同触发高度的回到顶部按钮。

这是第 15 行示例文本，请向下滚动查看不同触发高度的回到顶部按钮。

这是第 16 行示例文本，请向下滚动查看不同触发高度的回到顶部按钮。

这是第 17 行示例文本，请向下滚动查看不同触发高度的回到顶部按钮。

这是第 18 行示例文本，请向下滚动查看不同触发高度的回到顶部按钮。

这是第 19 行示例文本，请向下滚动查看不同触发高度的回到顶部按钮。

这是第 20 行示例文本，请向下滚动查看不同触发高度的回到顶部按钮。

这是第 21 行示例文本，请向下滚动查看不同触发高度的回到顶部按钮。

这是第 22 行示例文本，请向下滚动查看不同触发高度的回到顶部按钮。

这是第 23 行示例文本，请向下滚动查看不同触发高度的回到顶部按钮。

这是第 24 行示例文本，请向下滚动查看不同触发高度的回到顶部按钮。

这是第 25 行示例文本，请向下滚动查看不同触发高度的回到顶部按钮。

这是第 26 行示例文本，请向下滚动查看不同触发高度的回到顶部按钮。

这是第 27 行示例文本，请向下滚动查看不同触发高度的回到顶部按钮。

这是第 28 行示例文本，请向下滚动查看不同触发高度的回到顶部按钮。

这是第 29 行示例文本，请向下滚动查看不同触发高度的回到顶部按钮。

这是第 30 行示例文本，请向下滚动查看不同触发高度的回到顶部按钮。

触发高度: 200px

显示代码

指定滚动容器

通过设置 target 属性可以指定触发滚动的容器元素，可以是CSS选择器字符串或HTML元素。

容器1

这是容器1的第 1 行示例文本。

这是容器1的第 2 行示例文本。

这是容器1的第 3 行示例文本。

这是容器1的第 4 行示例文本。

这是容器1的第 5 行示例文本。

这是容器1的第 6 行示例文本。

这是容器1的第 7 行示例文本。

这是容器1的第 8 行示例文本。

这是容器1的第 9 行示例文本。

这是容器1的第 10 行示例文本。

这是容器1的第 11 行示例文本。

这是容器1的第 12 行示例文本。

这是容器1的第 13 行示例文本。

这是容器1的第 14 行示例文本。

这是容器1的第 15 行示例文本。

这是容器1的第 16 行示例文本。

这是容器1的第 17 行示例文本。

这是容器1的第 18 行示例文本。

这是容器1的第 19 行示例文本。

这是容器1的第 20 行示例文本。

容器2

这是容器2的第 1 行示例文本。

这是容器2的第 2 行示例文本。

这是容器2的第 3 行示例文本。

这是容器2的第 4 行示例文本。

这是容器2的第 5 行示例文本。

这是容器2的第 6 行示例文本。

这是容器2的第 7 行示例文本。

这是容器2的第 8 行示例文本。

这是容器2的第 9 行示例文本。

这是容器2的第 10 行示例文本。

这是容器2的第 11 行示例文本。

这是容器2的第 12 行示例文本。

这是容器2的第 13 行示例文本。

这是容器2的第 14 行示例文本。

这是容器2的第 15 行示例文本。

这是容器2的第 16 行示例文本。

这是容器2的第 17 行示例文本。

这是容器2的第 18 行示例文本。

这是容器2的第 19 行示例文本。

这是容器2的第 20 行示例文本。

显示代码

自定义内容

通过默认插槽可以自定义回到顶部按钮的内容，完全控制其外观。

这是第 1 行示例文本，请向下滚动查看自定义内容的回到顶部按钮。

这是第 2 行示例文本，请向下滚动查看自定义内容的回到顶部按钮。

这是第 3 行示例文本，请向下滚动查看自定义内容的回到顶部按钮。

这是第 4 行示例文本，请向下滚动查看自定义内容的回到顶部按钮。

这是第 5 行示例文本，请向下滚动查看自定义内容的回到顶部按钮。

这是第 6 行示例文本，请向下滚动查看自定义内容的回到顶部按钮。

这是第 7 行示例文本，请向下滚动查看自定义内容的回到顶部按钮。

这是第 8 行示例文本，请向下滚动查看自定义内容的回到顶部按钮。

这是第 9 行示例文本，请向下滚动查看自定义内容的回到顶部按钮。

这是第 10 行示例文本，请向下滚动查看自定义内容的回到顶部按钮。

这是第 11 行示例文本，请向下滚动查看自定义内容的回到顶部按钮。

这是第 12 行示例文本，请向下滚动查看自定义内容的回到顶部按钮。

这是第 13 行示例文本，请向下滚动查看自定义内容的回到顶部按钮。

这是第 14 行示例文本，请向下滚动查看自定义内容的回到顶部按钮。

这是第 15 行示例文本，请向下滚动查看自定义内容的回到顶部按钮。

这是第 16 行示例文本，请向下滚动查看自定义内容的回到顶部按钮。

这是第 17 行示例文本，请向下滚动查看自定义内容的回到顶部按钮。

这是第 18 行示例文本，请向下滚动查看自定义内容的回到顶部按钮。

这是第 19 行示例文本，请向下滚动查看自定义内容的回到顶部按钮。

这是第 20 行示例文本，请向下滚动查看自定义内容的回到顶部按钮。

这是第 21 行示例文本，请向下滚动查看自定义内容的回到顶部按钮。

这是第 22 行示例文本，请向下滚动查看自定义内容的回到顶部按钮。

这是第 23 行示例文本，请向下滚动查看自定义内容的回到顶部按钮。

这是第 24 行示例文本，请向下滚动查看自定义内容的回到顶部按钮。

这是第 25 行示例文本，请向下滚动查看自定义内容的回到顶部按钮。

这是第 26 行示例文本，请向下滚动查看自定义内容的回到顶部按钮。

这是第 27 行示例文本，请向下滚动查看自定义内容的回到顶部按钮。

这是第 28 行示例文本，请向下滚动查看自定义内容的回到顶部按钮。

这是第 29 行示例文本，请向下滚动查看自定义内容的回到顶部按钮。

这是第 30 行示例文本，请向下滚动查看自定义内容的回到顶部按钮。

显示代码

回到顶部 API

属性

属性名	说明	类型	可选值	默认值
target	触发滚动的目标元素	HTMLElement/string	—	—
icon	图标类型	string	—	caret-up
icon-size	图标大小	number	—	32
bottom	距离底部距离	string	—	32px
right	距离右侧距离	string	—	32px
visibility-height	显示触发的滚动高度	number	—	200
plain	是否使用朴素样式	boolean	—	false

事件

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

插槽

插槽名	说明
default	自定义按钮内容

样式变量

回到顶部组件使用了以下样式变量，可通过 SCSS 变量进行自定义：

变量名	说明
$theme-color-primary	主题色-主要
$color-white	白色
$bg-color-default	默认背景颜色
$z-index-up	上层层级
</rewritten_file>