锚点导航

this.$nextTick(() => {
  this.firstOffsetTop = this.$refs[this.currentKey][0].offsetTop;
  document.addEventListener('scroll', this.onScroll);
  this.list.forEach((val) => {
    this.itemOffsetTop.push({
      key: val.key,
      num: this.$refs[val.key][0].offsetTop - this.firstOffsetTop,
      height: this.$refs[val.key][0].clientHeight
    });
  });
});

onScroll(){
  const scrollTop = document.documentElement.scrollTop;
  this.itemOffsetTop.forEach((val, index) => {
    if(scrollTop > val.num && scrollTop - val.num > val.height / 2){
      if(index == this.itemOffsetTop.length - 1){
        this.currentKey = this.itemOffsetTop[index].key;
      }else {
        this.currentKey = this.itemOffsetTop[index + 1].key;
      }
    }else if(scrollTop < this.itemOffsetTop[0].height / 2){
      this.currentKey = this.itemOffsetTop[0].key;
    }
  })
},
//点击锚点定位
changeKey(key){
  document.removeEventListener('scroll', this.throttledScrollHandler);
  this.currentKey = key;
  let to = this.$refs[key][0].offsetTop - this.firstOffsetTop;
  this.animationScrollTo(document.documentElement, to);
},
//锚点定位动画滚动
animationScrollTo(el, to) {
  let scrollY = 0;
  const beginY = el.scrollTop;
  const raf = window.requestAnimationFrame || (func => setTimeout(func, 10));
  const moveFn = () => {
    if (beginY - to < 0) {
      scrollY += (to - beginY) / 30;
      if(scrollY <= (to - beginY)){
        el.scrollTop = beginY + scrollY;
        raf(moveFn);
      }else {
        el.scrollTop = to;
        document.addEventListener('scroll', this.throttledScrollHandler);
      }
    }else if(beginY - to > 0){
      scrollY += (beginY - to) / 30;
      if(scrollY <= (beginY - to)){
        el.scrollTop = beginY - scrollY;
        raf(moveFn);
      }else {
        el.scrollTop = to;
        document.addEventListener('scroll', this.throttledScrollHandler);
      }
    }
  };
  raf(moveFn);
}