vue实现顶部

索引

  今天工作的时候碰到一个比较常见的一种需要，点击按钮，返回顶部的一个需求，今天就把这个方法记录下来。
  但是在vue没有jquery的animate缓动动画，没办法让页面缓慢升到顶部，所以我们用到了定时器。

步骤

1. 监听页面滚动的scroll事件，得到页面滚动的高度。可以加个判断，当滚动大于200显示，当小于200隐藏。

  data() {
    return {
      // 这里是返回顶部的参数
      scrollTop: 0,
      time: 0,
      dParams: 20,
      scrollState: 0
    };
    mounted() {
      window.addEventListener('scroll', this.getScrollTop);
    },
    

2. 点击按钮的事件里增加定时器，每秒改变页面的滚动高度，高度等于页面当前滚动高度-滚动的距离，滚动距离给固定加速度，每秒递增，实现先慢后快的线性速度，滚动高度到头时，清除定时器，还原滚动距离初始值

  methods: {
   // 获取滚动条的位置
   // pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置
   getScrollTop() {
     this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
   },
   // 这里是点击事件
     toTop(e) {
       if(!!this.scrollState){
         return;
       }
       this.scrollState = 1;
       e.preventDefault();
       let distance = document.documentElement.scrollTop || document.body.scrollTop;
       let _this = this;
       this.time = setInterval(function(){ _this.gotoTop(_this.scrollTop-_this.dParams) }, 10);
         },
     gotoTop(distance){
       this.dParams += 20;
       distance = distance>0 ? distance : 0;
       document.documentElement.scrollTop = document.body.scrollTop = window.pageYOffset = distance;
       if(this.scrollTop < 10){
         clearInterval(this.time);
         this.dParams = 20;
         this.scrollState = 0;
       }
     },
}

3. 增加防抖处理，防止连续点击按钮触发多次定时器，点击按钮时改变状态位，状态位改变时跳出，滚动到顶部还原状态位