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