一. 需求

首頁內容多虚倒，翻過首頁第一頁彩届，顯示返回頂部按鈕

二. 邏輯

1.判斷返回頂部按鈕什么時候顯示：

借助@scroll監(jiān)聽滾動阳液，獲取當前滾動距離頂部的高度霉翔，獲取當前屏幕高度，當滾動高度大于屏幕高度柒凉，顯示返回頂部按鈕族阅，反之小于隱藏。

2.點擊按鈕膝捞，為返回頂部加上動畫：

設置步進值坦刀，通過逐漸增加步進值，來實現動畫效果蔬咬。注意這里要防止用戶多次點擊鲤遥，加上開關。

三.遇到的問題

1.設置window.scrollTop(0,滾動高度) 和document.documentElement.scrollTop=滾動高度 無效：

由于是加在id=box上的滾動林艘，并且由于頭部底部fixed固定盖奈，中間box也設置了固定定位。樣式設置的差異與理想的較大狐援，滾動區(qū)域實際是box钢坦，并且查看了監(jiān)視滾動方法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);
    },
    // 監(jiān)聽滾動條
    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>