一. 需求

首页内容多，翻过首页第一页，显示返回顶部按钮

二. 逻辑

1.判断返回顶部按钮什么时候显示：

借助@scroll监听滚动，获取当前滚动距离顶部的高度，获取当前屏幕高度，当滚动高度大于屏幕高度，显示返回顶部按钮，反之小于隐藏。

2.点击按钮，为返回顶部加上动画：

设置步进值，通过逐渐增加步进值，来实现动画效果。注意这里要防止用户多次点击，加上开关。

三.遇到的问题

1.设置window.scrollTop(0,滚动高度) 和document.documentElement.scrollTop=滚动高度 无效：

由于是加在id=box上的滚动，并且由于头部底部fixed固定，中间box也设置了固定定位。样式设置的差异与理想的较大，滚动区域实际是box，并且查看了监视滚动方法getScrollTop方法，确定滚动元素是box,所以给box加上ref属性获取到，并将滚动的高度赋值给this.$refs.box.scrollTop

2.滚动缓慢：

在setInterval里未设置步进值steep递增，匀速滚动效果体验差。

四.代码参考

<template>
  <div class="box" ref="box" @scroll="getScrollTop">
    <header></header>
    <div>具体内容</div>
   <footer></footer>
    <div class="scrollTop" v-show="showTop" @click="toTop">
      <img src="./imgs/zd.png" alt="">
    </div>
  </div>
</template>
<script>
export default {
  name: 'scroll-top',
  data() {
    return {
      scrollTop: 0,
      showTop: false,
      scrollTrigger: false
    };
  },
  computed: {
  },
  methods: {
    // 返回顶部
    toTop() {
      let that = this;
      // 防止用户频繁点击返回顶部按钮，待返回顶部成功后设置scrollTrigger为初始值
      if (that.scrollTrigger) {
        return;
      }
      // 获取当前距离顶部的数值，设置每次上滑的高度直到滚动到顶部为止
      let scrollTop = this.scrollTop;
      let steep = scrollTop / 2000;
      let timer = setInterval(() => {
        that.scrollTrigger = true;
        // 上滑滚动的速度慢慢加快，第一次走2000/1,然后减去已走的距离，下一次用剩下的距离再减去步进值，步进值也是不断变化，这样速度会越来越快
        scrollTop -= steep;
        // 步进值不改变的话会匀速缓慢上滑，不断增加步进值上滑的距离增加，视觉效果速度变快
        steep += 5;
        if (scrollTop <= 0) {
          clearInterval(timer);
          that.scrollTrigger = false;
        }
        // 由于是加在box上的滚动，直接用window.scrollTop无效，查看了getScrollTop方法滚动的元素，所以加在box上
        that.$refs.box.scrollTop = scrollTop;
      }, 30);
    },
    // 监听滚动条
    getScrollTop(e) {
      let that = this;
      // 设备高度
      let clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
      let scrollTop = e.srcElement.scrollTop;
      this.scrollTop = scrollTop;
    // 2倍像素除以2，-92是header和footer的高度
      if (scrollTop > ((clientHeight / 2) - 92)) {
        that.showTop = true;
      } else {
        that.showTop = false;
      }
    }
  }
};
</script>
<style scoped lang="less">
  .box{
    position: absolute;
    top: 0;
    bottom: 48px;
    left: 0;
    right: 0;
    overflow-y: auto;
    z-index: 1;
    padding-top: 44px;
    background-color: #f4f4f4;
    font-size: 15px;
    color: #000000;
  }
  .scrollTop{
    position: fixed;
    right: 40px;
    bottom: 80px;
    cursor: pointer;
    width:41px;
    height: 41px;
    z-index: 2;
    img{
      width:100%;
      height:100%;
    }
  }
</style>