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;
} 

  

原文地址:https://www.cnblogs.com/cb1490838281/p/12699474.html