vue 點擊返回頂部組件（默認不顯示，滾動一段距離後顯示），附帶動畫。

第一次使用vue作項目，UI選擇了Element-ui，看到官網有點擊回到頂部按鈕，而且按鈕是在滾動一段距離後纔出現的（附帶動畫），可是官網文檔並無這個組件，因而本身實現了一個。

首先說明，爲了使用美化的的滾動條，這裏使用了element的隱藏組件 el-scrollbar，因此滾動條滾動不是相對body（document）進行計算了，而是相對於節點 .el-scrollbar>.el-scrollbar__wrap計算的 (這兩個類名是組件自動生成的)。

若是要想用 相對於body計算的滾動位置，請看文章最後（只須要修改一下js部分就好了）。

建立ScrollTop.vue組件

　　模板部分：

　　　　

　　js部分

　　　　

　　css部分

　　　　

完整代碼在這裏，知道這纔是你想要的。。（不過仍是建議看着敲一遍~）

<template>
  <!--transition標籤 按鈕出現附帶動畫-->
  <transition name="el-fade-in">
    <div class="page-component-up" @click="scrollToTop" v-show="toTopShow">
      <i class="el-icon-caret-top"></i>
    </div>
  </transition>
</template>

<script>
  export default {
    data() {
      return {
        toTopShow: false,
      }
    },
    methods: {
      handleScroll() {
        //id scroller-box是本身在組件上添加的，爲了方便獲取dom
        this.scrollTop = document.getElementById("scroller-box").children[0].scrollTop
        if (this.scrollTop > 300) {
          this.toTopShow = true
        }else {
          this.toTopShow = false
        }
      },
      scrollToTop() {
        let timer = null, _that = this
        //動畫，使用requestAnimationFrame代替setInterval
        cancelAnimationFrame(timer)
        timer = requestAnimationFrame(function fn() {
          if (_that.scrollTop > 0) {
            _that.scrollTop -= 50
            document.getElementById("scroller-box").children[0].scrollTop = _that.scrollTop
            timer = requestAnimationFrame(fn)
          } else {
            cancelAnimationFrame(timer)
            _that.toTopShow = false
          }
        })
      }
    },
    mounted() {
　　　　//$nextTick 避免dom未加載
      this.$nextTick(function () {
        let targetScroll = document.getElementById("scroller-box").children[0]
        targetScroll.addEventListener('scroll', this.handleScroll)
      });
    },
    destroyed() {
      let targetScroll = document.getElementById("scroller-box").children[0]
      targetScroll.removeEventListener('scroll', this.handleScroll)
    }
  }
</script>
<style scoped lang="scss">
  .page-component-up{
    background-color: #409eff;
    position: fixed;
    right: 100px;
    bottom: 150px;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    cursor: pointer;
    transition: .3s;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .5);
    z-index: 100;
    .el-icon-caret-top{
      color: #fff;
      display: block;
      line-height: 40px;
      text-align: center;
      font-size: 18px;
    }
    p{
      display: none;
      text-align: center;
      color: #fff;
    }
    &:hover{
      opacity: .8;
    }
  }
</style>

View Code

在app.vue引入ScrollTop組件，大功告成，快去試試吧

 

最後，這裏是沒有用到美化滾動條，而是相對於body（document）計算的滾動條

 methods: {
      handleScroll() {
        //首先修改相對滾動位置
        this.scrollTop = this.scrollTop = window.pageYOffset || document.body.scrollTop
        if (this.scrollTop > 300) {
          this.toTopShow = true
        }else {
          this.toTopShow = false
        }
      },
      scrollToTop() {
        let timer = null, _that = this
        //動畫，使用requestAnimationFrame代替setInterval
        cancelAnimationFrame(timer)
        timer = requestAnimationFrame(function fn() {
          if (_that.scrollTop > 0) {
            _that.scrollTop -= 50
            //而後修改這裏實現動畫滾動效果
            document.body.scrollTop = document.documentElement.scrollTop = _that.scrollTop
            timer = requestAnimationFrame(fn)
          } else {
            cancelAnimationFrame(timer);
            _that.toTopShow = false
          }
        })
      }
    },
    mounted() {
      this.$nextTick(function () {
        //修改事件監聽
        window.addEventListener('scroll', this.handleScroll)
        
      });
    },
    destroyed() {
      
      window.removeEventListener('scroll', this.handleScroll)
      
    }

 

參考資料：https://blog.csdn.net/gmajip1/article/details/80531373