BackToTop 返回顶部
一、概述
定义
回到页面顶部的操作按钮。
使用场景
- 当页面高度比较高时
- 用户在浏览信息过程中,需要频繁回到顶部查看时
二、基础样式
方便用户快速回到页面顶部。
交互说明
1.当屏幕滑动超过一屏时,出现并固定在右下角悬浮
2.点击回到顶部按钮,页面滚动到顶部
<se-back-to-top></se-back-to-top>
注意,回到顶部按钮的显示区域被固定为 40px * 40px, 其中的内容可支持自定义。
<se-back-to-top :visibilityHeight="10" :bottom="100">
回到顶部
</se-back-to-top>
<h4>自定义示例</h4>
Props
属性 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
visibility-height | number | 200 | 否 | 滚动高度达到此参数值才出现 |
right | number | 20 | 否 | 控制其显示位置, 距离页面右边距 |
bottom | number | 20 | 否 | 控制其显示位置, 距离页面底部距离 |
Events
事件名称 | 描述 | 回调函数参数 |
---|---|---|
click | 回到顶部按钮点击时触发 | e: Event |