vue点击回到顶部

<div class="to-top" v-if="topImg" @click="toTop">
   <img src="../assets/icon_daodingbu@2x.png" alt="">
</div>

在mouted中监听页面滚动

mounted(){
      window.addEventListener('scroll', this.scrollTops)
	  //window.console.log(this.scrollTop)
      this.$addr.post("/index").then((res) => {
        if (res.data.code == 200) {
          this.contactMen = res.data.data
          window.console.log(this.contactMen[0].ind_user)
        }
      })
    },

methods:{
      //回到顶部的方法，加定时器是为了过渡顺滑
      backTop () {
        const that = this
        let timer = setInterval(() => {
          let ispeed = Math.floor(-that.scrollTop / 5)
          document.documentElement.scrollTop = document.body.scrollTop = 			  that.scrollTop + ispeed
          if (that.scrollTop === 0) {
            clearInterval(timer)
          }
        }, 16)
      },
      // 当高度大于120显示回顶部图标，小于120则隐藏
      toTop () {
        const that = this
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        that.scrollTop = scrollTop
        if (that.scrollTop > 120) {
          that.topImg= true
        } else {
          that.topImg= false
        }
      },
  }