Vue利用js实现点击菜单导航栏实现平滑滚动定位（纯CSS实现点这里）

里面有 等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>