最終效果如下：（注意需要做錨點聯動的部分並不在頁面的頂部而是頁面的某個div內）-chrome

完成這個功能需要注意：

1、點選導航平滑滾動到導航內容處

2、div內滾動時當前導航需要做響應

程式碼如下：

1、html結構（因為從專案裡擷取程式碼，allMenuList資料內容就不貼出來了，不算難點，這個可以根據自己的專案進行調整，相應的方法和類名別弄錯就行）

<div class="all-title">
    全部應用
    <p class="fr">
     <span v-for="(item,index) in allMenuList" :key="item.id" :class="[index===activeMenu?'active':'']" @click="jump(index)">{{ item.name }}</span>
    </p>
   </div>
   <div id="scrollBox" class="applications-content">
    <div v-for="(val,index) in allMenuList" :key="val.id" class="all-list do-jump">
     <p class="applications-title">{{ val.name }}</p>
     <ul class="applications-list">
      <li v-for="item in val.children" :key="item.id" class="applications-item" @click="changeRouterForRight(item.pathName,item.menuCode)">
       <img src="">
       <span>{{ item.name }}</span>
       <template v-if="showEdit">
        <i v-if="addOrRemove(item.menuCode)==0" class="el-icon-circle-plus add-btn" @click="addMenu(item.menuCode)" />
        <i v-if="addOrRemove(item.menuCode)==1" class="el-icon-remove remove-btn" @click="removeMenu(item.menuCode)" />
       </template>
      </li>
     </ul>
    </div>
   </div>

需要說明的資料：activeMenu-當前導航序號，scrollBox-需要在裡面滾動的元素即設為overflow-y:scroll的父元素div

2、點選導航平滑滾動的方法：jump(index)

// 跳轉
  jump(index) {
   this.activeMenu = index // 當前導航
   const jump = jQuery('.do-jump').eq(index)
   const scrollTop = jump.position().top + this.scrollBox.scrollTop // 獲取需要滾動的距離
   // Chrome
   this.scrollBox.scrollTo({
    top: scrollTop,behavior: 'smooth' // 平滑滾動
   })
  }

這裡有兩點需要說明：一是因為我vue專案裡裝了jquery所以這裡直接用了jquery的position().top來獲取元素到父元素的距離，如果專案裡沒裝jquery需要把這裡換成js的方法來獲取元素到父元素的距離（萬事有Google和度娘），二是點選之後需要滾動的距離計算時別忘了加上當前div已經滾動的距離即已經被捲起的高度

-----到這裡我們就可以實現1的功能

3、監聽scrollBox的滾動：

寫在mounted裡

// 獲取滾動dom元素
  this.scrollBox = document.getElementById('scrollBox')
  const jump = jQuery('.do-jump')
  const topArr = []
  for (let i = 0; i < jump.length; i++) {
   topArr.push(jump.eq(i).position().top)
  }
  // 監聽dom元素的scroll事件
  this.scrollBox.addEventListener('scroll',() => {
   const current_offset_top = that.scrollBox.scrollTop
   for (let i = 0; i < topArr.length; i++) {
    if (current_offset_top <= topArr[i]) { // 根據滾動距離判斷應該滾動到第幾個導航的位置
     that.activeMenu = i
     break
    }
   }
  },true)

這裡需要注意addEventListener裡有三個引數：'scroll' 、function、true

補充知識：vue搭建腳手架報錯：rollbackFailedOptinal:verb npm-session解決

vue搭建腳手架報錯：

rollbackFailedOptinal:verb npm-session

解決

如果你是在公司，而你的公司又用了代理連的外網

想辦法直接連外網咖，問題就是代理造成的

我用手機連電腦USB共享網路 哎，心好累

以上這篇vue 導航錨點_點選平滑滾動,導航欄對應變化詳解就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。