快捷導航

vue監(jiān)聽滾動條頁面滾動動畫示例代碼

更新時間：2023年06月23日 10:48:29 作者：賀包蛋

Vue是一套用于構(gòu)建用戶界面的漸進式框架,與其它大型框架不同的是,Vue?被設(shè)計為可以自底向上逐層應用,下面這篇文章主要給大家介紹了關(guān)于vue監(jiān)聽滾動條頁面滾動動畫的相關(guān)資料,需要的朋友可以參考下

以頁面底部的“回到頂部”功能為例，滾動動畫的實現(xiàn)思路是，當點擊按鈕時，獲取當前滾動條的位置，調(diào)用定時器函數(shù)，每個時間間隔對滾動條的位置遞減，直至減小到0，清除定時器，即可回到頁面頂部。

當滾動條沒有離開首頁的一個屏幕高度時，“回到頂部”按鈕應設(shè)為不可見，可以監(jiān)聽當前滾動條的位置，小于一個屏幕高度時，將按鈕的v-show屬性設(shè)為false，大于一個屏幕高度時，則設(shè)為true。

代碼示例

<template>
  <div id="index">
    <div class="toTop" v-show="showTop" @click="toTop">
      <img src="../assets/img/angle-square-up.png" alt="" width="35px" />
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      showTop: false,
    };
  },
  mounted() {
    // 添加監(jiān)聽事件
    window.addEventListener("scroll", this.scrolling);
  },
  methods: {
  	// 監(jiān)聽事件
    scrolling() {
      let current =
        document.documentElement.scrollTop || document.body.scrollTop;
      let vh = window.innerHeight;
      if (current >= vh) {
        this.showTop = true;
      } else {
        this.showTop = false;
      }
    },
    // 點擊事件
    toTop() {
      // 獲取當前滾動條的位置
      let top = document.documentElement.scrollTop || document.body.scrollTop;
      // 滾動動畫
      const timeTop = setInterval(() => {
        document.body.scrollTop =
          document.documentElement.scrollTop =
          top -=
            50;
        if (top <= 0) {
          clearInterval(timeTop);
        }
      }, 10);
    },
  },
};
</script>
<style lang="scss" scoped>
#index {
  .toTop {
    position: fixed;
    right: 20px;
    bottom: 20px;
    cursor: pointer;
    width: 35px;
    height: 35px;
    z-index: 2;
    opacity: 0.3;
  }
}
img:hover {
  opacity: 0.5;
}
</style>

獲取滾動條當前位置

document.documentElement.scrollTop || document.body.scrollTop

獲取屏幕高度

window.innerHeight

弄懂了這個原理之后，頂部導航條的實現(xiàn)就十分簡單了，如果不想寫滾動動畫的話，在<a>標簽的href屬性中填入目標跳轉(zhuǎn)位置的元素的id，就可以非常方便的直接跳轉(zhuǎn)。

導航條如圖

代碼示例

<template>
  <div id="navigation">
    <ul class="part1">
      <li>LOGO</li>
    </ul>
    <ul class="part2">
      <!-- href="/" rel="external nofollow"  rel="external nofollow"  跳轉(zhuǎn)到首頁 -->
      <li><a href="/" rel="external nofollow"  rel="external nofollow" >HOME</a></li>
      <!-- href="/#about" rel="external nofollow"  rel="external nofollow"  跳轉(zhuǎn)到首頁的id為about的元素位置 -->
      <li><a href="/#about" rel="external nofollow"  rel="external nofollow" >ABOUT</a></li>
      <li><a href="/#paper" rel="external nofollow" >PAPER</a></li>
      <li><a href="/#team" rel="external nofollow" >TEAM</a></li>
    </ul>
  </div>
</template>
<style lang="scss" scoped>
#navigation {
  width: 94vw;
  height: 60px;
  margin: 0 auto;
  // 彈性布局
  display: flex;
  justify-content: space-between;
  align-items: center;
  .part2 {
    // 彈性布局
    display: flex;
    justify-content: center;
    align-items: center;
  }
  li {
    width: 100px;
    height: 40px;
    line-height: 40px;
    font-weight: bold;
    a:link {
      color: #8e9eab;
    }
    a:visited {
      color: #8e9eab;
    }
    a:hover {
      color: #4f4f4f;
    }
    a:active {
      color: #4f4f4f;
    }
  }
}
</style>

插個題外話，如何優(yōu)雅地修改<a>標簽的默認樣式
主要是設(shè)置 a:link a:visited a:hover a:active 這幾個css屬性

修改前

修改后

附上代碼

a {
	// 清除默認下劃線
    text-decoration: none;
}
// 超鏈接初始樣式
a:link {
    color: #8e9eab;
}
// 超鏈接被訪問后的樣式
a:visited {
    color: #8e9eab;
}
// 鼠標懸停時的樣式
a:hover {
    color: #4f4f4f;
}
// 點擊超鏈接時的樣式
a:active {
    color: #8e9eab;
}