• BackTop返回顶部
    • Variables

    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