Vue返回顶部

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

<template>
    <div class="box">
            <div>
                下拉的内容
            </div>
        <!-- 1. 返回顶部 -->
        <div class="top"  v-show="top" @click="istop">
         回到顶部
        </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