vue 项目中 返回顶部 完美实现 值得收藏

新建一个组件 直接复制下面整个代码 需要的地方引入 就完美解决问题

<template>
  <div class="scrollTop">
    
     <button v-show="flag_scroll"  @click="backTop">
                   返回顶部
        </button>
    </div>
</template>    
<script>
export default {
  name: 'scrollTop',
  data() {
    return {
 
      flag_scroll: false,
      scroll: 0,
    }
  },


  methods: {
  //返回顶部事件
    backTop() {
    //  var obj= document.getElementsByClassName('scrollTop')[0].scrollTop 
     var objwin=document.documentElement.scrollTop
   var timer=  setInterval(function(){
document.documentElement.scrollTop-=20
if(document.documentElement.scrollTop<=0){
  clearInterval(timer)
}
     },1)
// console.log(obj);
console.log(objwin);
      
    },
   //滑动超过500时显示按钮
    handleScroll() {
      let scrollobj=document.body.scrollTop+document.documentElement.scrollTop
        console.log(scrollobj)
      if (scrollobj > 500) {
        this.flag_scroll = true
      } else {
        this.flag_scroll = false
      }
    },
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
  },
  destroyed () {
  window.removeEventListener('scroll', this.scrollToTop)
},

  created() { },
}
</script>
 
<style scoped>

</style>