js中 scrollTo()用法


1.場景:進入頁面上面是五個導航欄,內容部分是一段很長很長很長很長...的文字說明,點擊某一個按鈕精確定位到內容的小標題處

2.上代碼html部分

  <a-menu v-model="current" mode="horizontal">
            <a-menu-item
              class="fangkong shifted"
              @click="toteg('prevention')"
              key="prevention"
            >疫情防控動態</a-menu-item>
            <a-menu-item class="fangkong shifted" @click="toteg('qushi')" key="qushi">趨勢分析</a-menu-item>
            <a-menu-item class="fangkong shifted" @click="toteg('fenbu')" key="fenbu">病例人員分布</a-menu-item>
            <a-menu-item class="fangkong shifted" @click="toteg('chuzhi')" key="chuzhi">異常人員處置</a-menu-item>
            <a-menu-item class="fangkong shifted" @click="toteg('admap')" key="admap">疫情區域地圖</a-menu-item>
          </a-menu>

3.js部分

  toteg(item) {
      var id = "#" + item;
      let idItem = document.getElementById(item);
      let anchor = this.$el.querySelector(id); //計算傳進來的id到頂部的距離
      this.$nextTick(() => {
        // console.log(anchor.offsetTop)
        window.scrollTo(0, anchor.offsetTop - 130);  //滾動距離因為導航欄固定定位130px的高度
      });
    },

 4.小tips:入口文件加上這句會讓滾動更加絲滑喲

#app{
  scroll-behavior: smooth;
} 

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM