BackTop返回顶部
当页面内容冗长,需要快捷返回顶部时使用,一般放置在页面右下角位置,往下滑动页面体验。
TIP
1.0.4+
向下滚动页面,灰色的按钮为默认效果。
<avue-back-top :bottom="150"></avue-back-top>
<script>
export default {
}
</script>
向下滚动页面,蓝色的按钮为自定义效果。
<avue-back-top :height="100" :bottom="250">
<el-button>返回顶端</el-button>
</avue-back-top>
<script>
export default {
}
</script>
用于测试长度的
<div style="height:500px"></div>
<script>
export default {
}
</script>
Variables
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
id | 指定父类 | String | - | window |
height | 页面滚动高度达到该值时才显示BackTop组件 | Number | - | 400 |
bottom | 组件距离底部的距离 | Number | - | 30 |
right | 组件距离右部的距离 | Number | - | 30 |
duration | 滚动动画持续时间,单位 毫秒 | Number | - | 1000 |