点击返回顶部事件,并实现滚动效果(vue)

问题：

 在写移动端项目时，总会遇到列表数据很多，下滑很多页后，想瞬间返回顶部，进行其他操作的需求，所以，手写点击返回顶部的需求，势在必行。

思路： 

•  做一个按钮，在滚动条距离顶部多少距离时显示出来
• 点击按钮置顶：也就是改变滚动条距离顶部的距离
• 返回顶部滚动效果：做一个定时器，在多少时间内减少多少的距顶距离
• 按钮的显隐：设置按钮在什么高度显示和隐藏

代码： 

// 按钮，vant组件的button按钮
<van-button 
    v-show="scrollType" 
    round icon="back-top" 
    class="btn_top" 
    @click="backTop" />

data(){
    return {
        // 按钮显隐控制字段
        scrollType: false    
    }
}
mounted() {
    // 必须为true
    window.addEventListener('scroll', this.handleScroll, true)
},
destroyed() {
    // 销毁
    window.removeEventListener('scroll', this.handleScroll)
},
// 点击返回顶部
backTop() {
  let top = document.documentElement.scrollTop || document.body.scrollTop
  // 实现滚动效果
  const timeTop = setInterval(() => {
    document.body.scrollTop = document.documentElement.scrollTop = top -= 50
    if (top <= 0) {
      clearInterval(timeTop)
    }
  }, 15)
},
// 按钮显示隐藏监听
handleScroll() {
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
  if (scrollTop > 600) {
    this.scrollType = true // 显示
  } else {
    this.scrollType = false // 隐藏
  }
},