快捷導(dǎo)航

vue實現(xiàn)點擊導(dǎo)航欄滾動頁面到指定位置的功能(推薦)

更新時間：2023年11月07日 12:05:39 作者：阿湫

這篇文章主要介紹了vue實現(xiàn)點擊導(dǎo)航欄滾動頁面到指定位置的功能(推薦),步驟一是是通過獲取不同板塊的滾輪高度,步驟二通過編寫執(zhí)行滾動操作的函數(shù),結(jié)合實例代碼給大家介紹的非常詳細,需要的朋友可以參考下

實現(xiàn)效果

在這里插入圖片描述

具體實現(xiàn)步驟

step1：獲取不同板塊的滾輪高度

當編寫好html部分后，我們創(chuàng)建一個可以獲取當前滾輪位置的方法handleScroll()，并在mounted鉤子函數(shù)中添加該方法的監(jiān)聽事件

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

創(chuàng)建好監(jiān)聽事件后，我們手動滑動網(wǎng)頁右側(cè)滾動條到各版塊位置，并打印當前板塊的滾輪高度

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

step2：編寫執(zhí)行滾動操作的函數(shù)

1、具體思路

① 獲取到當前滾輪位置后，計算其位置與目標區(qū)域位置的高度差 x
② 進行 n 次循環(huán)，不斷減去設(shè)定的最小移動單位 dx ，來縮減它們之間的高度差，直至為 0
③ 但需要注意的是：因不同位置獲取到滾輪的高度不固定，所以 n -1 次減去最小移動單位 dx 后，高度差不一定為零，即 0 < x < dx （此時的高度差：是高度差對最小移動單位取余的余數(shù)），所以在執(zhí)行滾動前，需要先將高度差減去余數(shù)，才能保證通過n次循環(huán)，剛好能到達指定位置（ x = 0）

2、實現(xiàn)方法

通過定時器進行 n 次循環(huán)，高度差不斷減去最小移動距離至 0，同時控制滾動條不斷靠近目標位置（即向目標位置加/減單位距離）

這里先定義好需要使用的變量

data(){
	return {
	  scrollHeight:0, //當前滾輪高度
      metaHeight:15,  //最小滾動距離
      metaTime: 10,   //最小執(zhí)行時間
      targetHeight:0,     //目標區(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: //默認：區(qū)域一
          this.targetHeight= 208
          break;
      }
      // 判斷執(zhí)行情況
      // 當指定區(qū)域和當前滾動條位置一致時
      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)到達該區(qū)域了哦')
      }
      // 當指定區(qū)域高度大于當前滾動條位置時（即目標區(qū)在當前滾輪的下方）
      else if(this.targetHeight> this.scrollHeight){
        // 計算高度差
        let x = this.targetHeight- this.scrollHeight;
        // 先加上余數(shù)，保證高度差能整除設(shè)定的最小移動單位
        document.documentElement.scrollTop += x%this.metaHeight;
        x -= x%this.metaHeight;
        const goto = setInterval(() => { // 建立執(zhí)行操作的定時器
          document.documentElement.scrollTop  += this.metaHeight; // 控制移動滾動條
          x-= this.metaHeight; // 縮減高度差
          if (x == 0) { // 到達指定位置后清除定時器
            clearInterval(goto); //清除定時器
          }
        }, this.metaTime);
      }
      // 當指定區(qū)域高度小于當前滾動條位置時（即目標區(qū)在當前滾輪的上方）
      else{
        // 計算高度差
        let x = this.scrollHeight - this.targetHeight;
        // 先減去余數(shù)，保證高度差能整除設(shè)定的最小移動單位
        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); //清除定時器
          }
        }, 1);
      }
    },

為導(dǎo)航欄添加點擊事件 @click

<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:"風景",
          index:3
        },
        {
          id:"lnb4",
          title:"文創(chuàng)",
          index:4
        }],
}