手机端回到顶部效果一直失效（滚动值总为0）

移动端兼容写法：let scrollTop =document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; 这3个参数一直为0，解决：将overflow-y:auto去掉（我用的）或改为overflow-y:visible即可 。

小tip: html文档有DTD声明用document.documentElement.scrollTop,无声明用：document.body.scrollTop.

// 封装的点击回到顶部组件（可全局使用,<BackTop />）
<template>
      <div class="iconfont top" v-if="btnFlag" @click="backTop" >&#xe6a4;</div>
</template>
<script>
export default {
    data(){
       return{
          scrollTop:0,
          btnFlag: false  // 默认隐藏图标（iconfont箭头图标）
       }
    },
   // vue的两个生命钩子，这里不多解释。
   //window对象，所有浏览器都支持window对象。它表示浏览器窗口，监听滚动事件
    mounted () {
      window.addEventListener('scroll', this.scrollToTop,true)
    },
    destroyed () {
      window.removeEventListener('scroll', this.scrollToTop,true)
    },
   methods: {
     // 点击图片回到顶部方法，加计时器是为了过渡顺滑
     backTop () {
      // alert("我被点击了");
      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)
  },
 
  // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
      scrollToTop () {
            const that = this;
            let scrollTop =document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
            that.scrollTop = scrollTop
            if (that.scrollTop > 80) {
              that.btnFlag = true;
            } else {
              that.btnFlag = false;
      }
  }
 }
}
</script>

<style scoped>
    .top{
       position:fixed;
       z-index:999;
       border-radius:50%;
       font-size:1rem;
       color:#c1c1c1;
       background:#fff;
       bottom:2rem;
       right:.2rem;
    }
</style>

参照：https://blog.csdn.net/qq_40419454/article/details/93503767