vue2.0 监听滚动 锚点定位

vue中监听滚动的方法其实可以用：

// Chrome
document.body.scrollTop
// Firefox
document.documentElement.scrollTop
// Safari
window.pageYOffset 

:scrollTop(滚动之根本)，document.body.scrollTop的值来实现滚动，但是后来逐渐发现很邪门，

有时给其赋值并没有作用，就是不能监听滚动后来知道

  mounted() {
    this.$nextTick(function() {
      let _this = this;
      window.addEventListener("scroll", this.onScroll);
    });
  },

用window.addEventListener 来监听页面的滚动 ，然后在结合（如果没有啥特殊的效果推荐用）

直接用 <a href="#id"> 是最简单粗暴的办法

最后不甘心用这个 href 然后就用了 ref 这个属性来获取；

 mounted() {
    this.$nextTick(function() {
      let _this = this;
      _this.$refs.app.scrollTop = ;
      _this.height = _this.$refs.app.offsetHeight;
      _this.$refs.app.addEventListener("scroll", _this.onScroll, true);
      //window.addEventListener("scroll", this.onScroll);
    });
  },

然后在div

   <a href="javascript:;"  data-num="1" :class="num==1?'selected':'unselected'" @click="changeTab(1)">活动规则</a>
   <a href="javascript:;" data-num="2" :class="num==2?'selected':'unselected'"  @click="changeTab(2)">活动介绍</a>

 changeTab(num) {
      const vm = this;
      let otherTop = vm.$refs.other.offsetTop;
      vm.num = num;
      let scrollTop = 0;
      switch (num) {
        case 1:
          vm.position = false;
          scrollTop = 0;
          break;
        case 2:
          vm.position = true;
          scrollTop = vm.headerH;
          break;
        case 3:
          vm.position = true;
          scrollTop = otherTop;
          break;
      }
      console.log(scrollTop);
      setTimeout(() => {
        vm.$refs.app.scrollTop = scrollTop;
      }, 100);
    },

如果 你就得这样不够平滑，可以 用每一小段一小段的跳，这样会导致视觉上是一个平滑的效果，

而不是我点击了就突然scrollTop就突然下去或者上来，避免了很突兀的感觉。

//    平滑滚动，时长500ms，每10ms一跳，共50跳
let step = total / 50 >> 0

这样 就可以实现 锚点 和监听滚动了 ，当然你可以在页面跳转走后销毁 ，这样体验更好

destroyed() {
    window.removeEventListener("scroll", this.onScroll);
  }