這篇文章主要為大家展示了“vue+導(dǎo)航錨點(diǎn)聯(lián)動(dòng)-滾動(dòng)監(jiān)聽和點(diǎn)擊平滑滾動(dòng)跳轉(zhuǎn)的示例分析”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue+導(dǎo)航錨點(diǎn)聯(lián)動(dòng)-滾動(dòng)監(jiān)聽和點(diǎn)擊平滑滾動(dòng)跳轉(zhuǎn)的示例分析”這篇文章吧。

創(chuàng)新互聯(lián)是一家專業(yè)提供綿竹企業(yè)網(wǎng)站建設(shè),專注與成都做網(wǎng)站、成都網(wǎng)站制作、H5開發(fā)、小程序制作等業(yè)務(wù)。10年已為綿竹眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)網(wǎng)絡(luò)公司優(yōu)惠進(jìn)行中。

最終效果如下：（注意需要做錨點(diǎn)聯(lián)動(dòng)的部分并不在頁面的頂部而是頁面的某個(gè)div內(nèi)）-chrome

完成這個(gè)功能需要注意：

1、點(diǎn)擊導(dǎo)航平滑滾動(dòng)到導(dǎo)航內(nèi)容處

2、div內(nèi)滾動(dòng)時(shí)當(dāng)前導(dǎo)航需要做響應(yīng)

代碼如下：

1、html結(jié)構(gòu)（因?yàn)閺捻?xiàng)目里截取代碼數(shù)據(jù)內(nèi)容就不貼出來了，不算難點(diǎn)，這個(gè)可以根據(jù)自己的項(xiàng)目進(jìn)行調(diào)整，相應(yīng)的方法和類名別弄錯(cuò)就行）

<div class="all-title">
  全部應(yīng)用
  <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>

需要說明的數(shù)據(jù)：activeMenu-當(dāng)前導(dǎo)航序號(hào)，scrollBox-需要在里面滾動(dòng)的元素即設(shè)為overflow-y:scroll的父元素div

2、點(diǎn)擊導(dǎo)航平滑滾動(dòng)的方法：jump(index)

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

這里有兩點(diǎn)需要說明：一是因?yàn)槲襳ue項(xiàng)目里裝了jquery所以這里直接用了jquery的position().top來獲取元素到父元素的距離，如果項(xiàng)目里沒裝jquery需要把這里換成js的方法來獲取元素到父元素的距離（萬事有Google和度娘），二是點(diǎn)擊之后需要滾動(dòng)的距離計(jì)算時(shí)別忘了加上當(dāng)前div已經(jīng)滾動(dòng)的距離即已經(jīng)被卷起的高度

-----到這里我們就可以實(shí)現(xiàn)1的功能

3、監(jiān)聽scrollBox的滾動(dòng)：

寫在mounted里

// 獲取滾動(dòng)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)
 }
 // 監(jiān)聽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]) { // 根據(jù)滾動(dòng)距離判斷應(yīng)該滾動(dòng)到第幾個(gè)導(dǎo)航的位置
   that.activeMenu = i
   break
  }
  }
 }, true)

這里需要注意addEventListener里有三個(gè)參數(shù)：'scroll' 、function、true

以上是“vue+導(dǎo)航錨點(diǎn)聯(lián)動(dòng)-滾動(dòng)監(jiān)聽和點(diǎn)擊平滑滾動(dòng)跳轉(zhuǎn)的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。

標(biāo)題名稱：vue+導(dǎo)航錨點(diǎn)聯(lián)動(dòng)-滾動(dòng)監(jiān)聽和點(diǎn)擊平滑滾動(dòng)跳轉(zhuǎn)的示例分析-創(chuàng)新互聯(lián)
網(wǎng)頁路徑：http://www.chinadenli.net/article30/ccehso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供自適應(yīng)網(wǎng)站、做網(wǎng)站、網(wǎng)站維護(hù)、外貿(mào)網(wǎng)站建設(shè)、品牌網(wǎng)站制作、移動(dòng)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)