vue回到顶部

当页面出现上下滚动条时，页面右下角出现回到顶部功能。

在页面上添加如下DIV（写的CSS内部样式），这个DIV功能：出现滚动条往下滑动，就显示出来，反之隐藏。点击DIV快速回到顶部。

     <div
  v-if="btnFlag"
  class="backTop"
  @click="backTop"
>
  <img src="@/assets/needsAnalysis/top.png">
  <p>顶部</p>
</div>

btnFlag: false,

  mounted () {
    window.addEventListener('scroll', this.scrollToTop)
  },
  destroyed () {
    window.removeEventListener('scroll', this.scrollToTop)
  },

// 点击图片回到顶部方法，加计时器是为了过渡顺滑

backTop () {
  const that = this
  const timer = setInterval(() => {
    const ispeed = Math.floor(-that.scrollTop / 5)
    document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
    if (that.scrollTop === 0) {
      clearInterval(timer)
    }
  }, 16)
},

// 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
scrollToTop () {
  const that = this
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
  that.scrollTop = scrollTop
  if (that.scrollTop > 60) {
    that.btnFlag = true
  } else {
    that.btnFlag = false
  }
},

链接
https://www.cnblogs.com/Charles-Yuan/p/11469290.html