关于chrome:vue实现滚动超过首屏高度位置点击小盒子回到顶部效果火狐IE均有效

思路剖析

回到顶部成果，思路其实很简略。就是初始有一个盒子，固定定位在浏览器网页的右下角，一开始要暗藏起来。当滚动超过首屏高度的地位时，才让其呈现。给这个小盒子绑定一个点击事件，在点击事件的回调中，应用定时器去让滚动条的高度递加，从而实现回到顶部成果。当然也要绑定滚动事件，监听滚动的高度，即监听滚动条的纵坐标的地位。因为须要拿滚动条滚动的高度和首屏的高度做比拟。
话不所说，先看一下最终效果图：

请依照正文来哦

代码附上

<template>
  <div id="app">
    <p v-for="(item, index) in arr" :key="index"> 回到顶部 </p>
    <div class="back" v-show="showGoTop" @click="goToTop">back</div>
  </div>
</template>

<script>
export default {data() {
    return {arr: [],
      showGoTop: false,
    };
  },
  mounted() {for (let index = 0; index < 54; index++) {this.arr.push(index);
    }

    // 第一步，绑定一个滚动事件，当滚动的间隔达到浏览器窗口的外部高度的时候 (大略一个屏幕的高度吧)
    //         就让回到顶部的小盒子显示进去
    window.addEventListener("scroll", this.handleScroll,true); // 这里加上 true 是为了保障浏览器滚动的及时性
  },
  methods: {
    // 滚动事件的回调函数
    handleScroll() {
      let scrolltop = document.documentElement.scrollTop; // 获取以后页面的滚动条纵坐标地位 
      console.log("看看滚动了多高的间隔",scrolltop);
      if(scrolltop > window.innerHeight){  // 浏览器窗口的外部高度 window.innerHeight
        this.showGoTop = true // 超过就显示进去
      }else{this.showGoTop = false // 不超过还藏起来}
    },
    // 第二步，当用户点击回到顶部小盒子的时候，依然获取所在的页面的滚动条纵坐标地位,
    //         应用定时器让页面滚动条的坐标地位递加，这样就能实现平滑过渡的成果
    goToTop() {
      let scrolltop = document.documentElement.scrollTop; // 获取以后页面的滚动条纵坐标地位 
      // 定时器平滑滚动
      const time = setInterval(() => {
        document.documentElement.scrollTop = scrolltop -= 40;
        if (scrolltop <= 0) {  // 定时器要及时革除掉，要不然始终执行很恐怖的
          clearInterval(time);
        }
      }, 10);
    },
  },
};
</script>

<style lang="less" scoped>
p {margin-bottom: 30px;}
.back {
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  background-color: #abf;
  position: fixed;
  right: 100px;
  bottom: 100px;
  cursor: pointer;
}
</style>

总结

好忘性不如烂笔头，记录一下