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>

总结

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