[JavaScript知识库]Vue返回顶部（简易实现）

1.在template标签中设置一个点击事件，并且在data函数中定义top状态为隐藏即false

<template>
????<div?class="box">

????????<!--?1.?返回顶部?-->
????????<div?class="top"??v-show="top"?@click="istop">
?????????????<van-icon?name="back-top"?color="#1989fa"??size="30"??/>
????????</div>
????</div>
</template>

?

      data(){
            return{
                top:false,//控制显隐
            }
        },

2.在生命周期中监听滚动的高度

       mounted(){
          window.addEventListener("scroll",()=>{// 滚动事件
             let html =document.documentElement 
             if (html.scrollTop>=100) {//当滚动高度大于等于100返回顶部出现
                 this.top=true
             } else {
                 this.top=false
             }
         })
        },

3.在methods方法中通过点击事件+定时器实现回顶效果

      methods:{//3 加定时器的回顶效果
             istop(){
                //  document.documentElement.scrollTop=0
                 let html =document.documentElement 
                 var timer = setInterval(() => {
                     if (html.scrollTop<=0) {
                         clearInterval(timer)
                     }
                     html.scrollTop=html.scrollTop-20
                 }, 10);
             }
        }

下面来看一下吧 (*^_^*)

<template>
    <div class="box">
        <!-- 1. 返回顶部 -->
        <div class="top"  v-show="top" @click="istop">
             <van-icon name="back-top" color="#1989fa"  size="30"  />
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                top:false,//控制显隐
            }
        },
        mounted(){
         window.addEventListener("scroll",()=>{// 滚动事件
             let html =document.documentElement 
             if (html.scrollTop>=100) {//当滚动高度大于等于100返回顶部出现
                 this.top=true
             } else {
                 this.top=false
             }
         })
        },
        methods:{//3 加定时器的回顶效果
             istop(){
                //  document.documentElement.scrollTop=0
                 let html =document.documentElement 
                 var timer = setInterval(() => {
                     if (html.scrollTop<=0) {
                         clearInterval(timer)
                     }
                     html.scrollTop=html.scrollTop-20
                 }, 10);
             }
        }
    }
</script>

<style lang="scss" scoped>
.box{
    position: relative;
    .top{
        position: fixed;
        right: 20px;
        bottom: 60px;
        padding: 20px;
        background: rgba(0,155,0,.3);
    }
}
</style>