Vue利用js实现点击菜单导航栏实现平滑滚动定位

里面有 等elementui的标签，不用的话可以换Div

代码结构

<template><div><el-menu:default-active="activeIndex2"class="el-menu-demo"       mode="horizontal"       @select="handleSelect"       background-color="#fff"       text-color="#000"       active-text-color="green"><!-- 可以从后面拿数据,也可以按下面的写法--><!--<el-menu-item         v-for="(item, index) in title_list":key="index"         @click="jump(index)"><span           ref="spans":style="{ color: activeStep === index ? 'green' : '#000000' }"           @click="jump(index)">{{ item.title}}</span></el-menu-item>--><el-menu-item index="1" @click="jump(0)">申请领料</el-menu-item><el-menu-item index="2" @click="jump(1)">角色管理</el-menu-item><el-menu-item index="3" @click="jump(2)">物料申请</el-menu-item><el-menu-item index="4" @click="jump(3)">料车表单</el-menu-item><el-menu-item index="5" @click="jump(4)">消息中心</el-menu-item><el-menu-item index="6"></el-menu-item></el-menu><divclass="result" @scroll="onScroll"><divclass="scroll-item"><divclass="contentOne"><divclass="contA">申请领料1111</div></div></div><divclass="scroll-item"><divclass="contentOne"><divclass="contA">角色管理2222</div></div></div><divclass="scroll-item"><divclass="contentOne"><divclass="contA">物料申请3333</div><divclass="contB">物料申请3333</div></div></div><divclass="scroll-item"><divclass="contentOne"><divclass="contA">料车表单4444</div><divclass="contB">料车表单4444</div><divclass="contC">料车表单4444</div></div></div><divclass="scroll-item"><divclass="contentOne"><divclass="contA">消息中心5555</div><divclass="contB">消息中心5555</div><divclass="contB">消息中心5555</div><divclass="contB">消息中心5555</div></div></div><divclass="scroll-itemSp"><div></div></div></div></div></template>

script部分

<script>exportdefault{   methods:{jump(index){var items= document.querySelectorAll(".scroll-item");for(var i=0; i< items.length; i++){if(index=== i){           items[i].scrollIntoView({             block:"start",//默认跳转到顶部             behavior:"smooth",//滚动的速度});}}},onScroll(e){let scrollItems= document.querySelectorAll(".scroll-item");for(let i= scrollItems.length-1; i>=0; i--){// 判断滚动条滚动距离是否大于当前滚动项可滚动距离let judge=           e.target.scrollTop>=           scrollItems[i].offsetTop- scrollItems[0].offsetTop;if(judge){this.activeStep= i;break;}}},},data(){return{       activeIndex:"1",       activeIndex2:"1",       activeStep:0,       title_list:[{ title:"申请领料"},{ title:"角色管理"},{ title:"物料申请"},{ title:"料车表单"},{ title:"消息中心"},],};},};</script>

CSS部分

<style scoped>.result{   width:100%;   height:530px;   overflow: scroll;}.scroll-item{   width:100%;   height:300px;   margin-top:20px;   background: #eee;}.scroll-itemSp{   width:100%;   height:300px;/* margin-top: 20px; */   background: #eee;}.scroll-item> span{   font-size:40px;}.scroll-item:first-child{   margin-top:0;}.scroll-item:last-child{   height:500px;}.el-menu{   padding-left:500px;}.el-menu-item{   margin-left:10px;}.contentOne{   display: flex;/* height: 250px; */}.contA{   width:180px;   height:180px;   background-color: green;   margin-top:20px;}.contB{   width:180px;   height:180px;   background-color: green;   margin-top:20px;   margin-left:20px;}.contC{   width:180px;   height:180px;   background-color: green;   margin-top:20px;   margin-left:20px;}</style>