BackTop返回顶部

当页面内容冗长,需要快捷返回顶部时使用,一般放置在页面右下角位置,往下滑动页面体验。

TIP

1.0.4+

BackTop返回顶部 - 图1

向下滚动页面,灰色的按钮为默认效果。

  1. <avue-back-top :bottom="150"></avue-back-top>
  2. <script>
  3. export default {
  4. }
  5. </script>

BackTop返回顶部 - 图2

向下滚动页面,蓝色的按钮为自定义效果。

  1. <avue-back-top :height="100" :bottom="250">
  2. <el-button>返回顶端</el-button>
  3. </avue-back-top>
  4. <script>
  5. export default {
  6. }
  7. </script>

BackTop返回顶部 - 图3

用于测试长度的

  1. <div style="height:500px"></div>
  2. <script>
  3. export default {
  4. }
  5. </script>

Variables

参数说明类型可选值默认值
id指定父类String-window
height页面滚动高度达到该值时才显示BackTop组件Number-400
bottom组件距离底部的距离Number-30
right组件距离右部的距离Number-30
duration滚动动画持续时间,单位 毫秒Number-1000