vue返回顶部操作

<template>
  <div class="container">
    <div class="go-top" v-if="btnFlag" @click="backTop">
      <img :src="imgGoTopSrc" />
      <br />
      <span>回顶部</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      btnFlag: false,
      //记录屏幕滑动的值
      scrollTop: 0,
      imgGoTopSrc: require('@/assets/img/goTop.png'),
    }
  },
  mounted() {
    let that = this
    window.addEventListener('scroll', that.scrollToTop, true)
    // console.log(document.body.scrollTop)
  },
  destroyed: function () {
    window.removeEventListener('scroll', this.scrollToTop)
  },
  methods: {
    //返回顶部
    backTop() {
      const that = this
      //使用定时器设置滑动过渡效果
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5)
        // console.log(ispeed)
        // console.log(that.scrollTop)
        document.documentElement.scrollTop = document.body.scrollTop =
          that.scrollTop + ispeed
        if (that.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 16)
    },

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

<style scoped lang="less">
.go-top {
  background: #fff;
  position: fixed;
  z-index: 99;
  right: 13px;
  bottom: 50px;
  text-align: center;
  padding: 10px 0;
  margin-bottom: 50px;
  cursor: pointer;
  box-shadow: 0 0 6px rgb(0 0 0 / 12%);
  img {
    width: 20px;
    height: 20px;
  }
  span {
    font-size: 12px;
  }
}
</style>