methods: {
  handleScroll() {
      var scrollTop = document.documentElement.scrollTop;
      this.scrollHeight = scrollTop;
      console.log('當(dāng)前滾輪高度:',this.scrollHeight); // 使用后記得注釋掉哦
  },
},
mounted(){
   window.addEventListener("scroll", this.handleScroll);
}

 // 獲取到到的各版塊滾輪高度
 // area1 scrollHeight == 208.3813934326172
 // area2 scrollHeight == 960.2766723632812
 // area3 scrollHeight == 1637.001708984375
 // area4 scrollHeight == 2305.38330078125

data(){
	return {
	  scrollHeight:0, //當(dāng)前滾輪高度
      metaHeight:15,  //最小滾動(dòng)距離
      metaTime: 10,   //最小執(zhí)行時(shí)間
      targetHeight:0,     //目標(biāo)區(qū)域滾輪高度
	}
}

 toArea(index) { // 這里的index是左側(cè)導(dǎo)航欄傳的參數(shù)，是不同區(qū)域設(shè)定好的索引值
      switch (index) { // 匹配不同區(qū)域的滾輪高度
        case 1: //區(qū)域一
          this.targetHeight= 208  //這里將第一步獲取到的滾輪高度取整
          break;
        case 2: //區(qū)域二
          this.targetHeight= 960
          break;
        case 3: //區(qū)域三
          this.targetHeight= 1637
          break;
        case 4: //區(qū)域四
          this.targetHeight= 2305
          break;
        default: //默認(rèn)：區(qū)域一
          this.targetHeight= 208
          break;
      }
      // 判斷執(zhí)行情況
      // 當(dāng)指定區(qū)域和當(dāng)前滾動(dòng)條位置一致時(shí)
      if( (document.documentElement.scrollTop===208&&this.targetHeight === 208)||
          (document.documentElement.scrollTop===960&&this.targetHeight === 960)||
          (document.documentElement.scrollTop===1637&&this.targetHeight === 1637))
      {
        console.log('已經(jīng)到達(dá)該區(qū)域了哦')
      }
      // 當(dāng)指定區(qū)域高度大于當(dāng)前滾動(dòng)條位置時(shí)（即目標(biāo)區(qū)在當(dāng)前滾輪的下方）
      else if(this.targetHeight> this.scrollHeight){
        // 計(jì)算高度差
        let x = this.targetHeight- this.scrollHeight;
        // 先加上余數(shù)，保證高度差能整除設(shè)定的最小移動(dòng)單位
        document.documentElement.scrollTop += x%this.metaHeight;
        x -= x%this.metaHeight;
        const goto = setInterval(() => { // 建立執(zhí)行操作的定時(shí)器
          document.documentElement.scrollTop  += this.metaHeight; // 控制移動(dòng)滾動(dòng)條
          x-= this.metaHeight; // 縮減高度差
          if (x == 0) { // 到達(dá)指定位置后清除定時(shí)器
            clearInterval(goto); //清除定時(shí)器
          }
        }, this.metaTime);
      }
      // 當(dāng)指定區(qū)域高度小于當(dāng)前滾動(dòng)條位置時(shí)（即目標(biāo)區(qū)在當(dāng)前滾輪的上方）
      else{
        // 計(jì)算高度差
        let x = this.scrollHeight - this.targetHeight;
        // 先減去余數(shù)，保證高度差能整除設(shè)定的最小移動(dòng)單位
        document.documentElement.scrollTop -= x%this.metaHeight;
        x -= x%this.metaHeight;
        const goto = setInterval(() => {
          document.documentElement.scrollTop -= this.metaHeight;
          x-= this.metaHeight;
          if (x == 0) {
            clearInterval(goto); //清除定時(shí)器
          }
        }, 1);
      }
    },

<div id="leftNavbar" v-show="scrollHeight > 200">
    <div v-for="(item,index) in navBarList" :key="index" :id="item.id" 
    	@click="toArea(item.index)">
        {{ item.title }}
    </div>
</div>

data(){
return {
	 navBarList:
	 [{
          id:"lnb1",
          title:"教育",
          index:1
        },
        {
          id:"lnb2",
          title:"歷史",
          index:2
        },
        {
          id:"lnb3",
          title:"風(fēng)景",
          index:3
        },
        {
          id:"lnb4",
          title:"文創(chuàng)",
          index:4
        }],
}