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

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>

    <div class="result" @scroll="onScroll">
      <div class="scroll-item">
        <div class="contentOne">
          <div class="contA">申请领料1111</div>
        </div>
      </div>
      <div class="scroll-item">
        <div class="contentOne">
          <div class="contA">角色管理2222</div>
        </div>
      </div>
      <div class="scroll-item">
        <div class="contentOne">
          <div class="contA">物料申请3333</div>
          <div class="contB">物料申请3333</div>
        </div>
      </div>
      <div class="scroll-item">
        <div class="contentOne">
          <div class="contA">料车表单4444</div>
          <div class="contB">料车表单4444</div>
          <div class="contC">料车表单4444</div>
        </div>
      </div>
      <div class="scroll-item">
        <div class="contentOne">
          <div class="contA">消息中心5555</div>
          <div class="contB">消息中心5555</div>
          <div class="contB">消息中心5555</div>
          <div class="contB">消息中心5555</div>
        </div>
      </div>
      <div class="scroll-itemSp">
        <div></div>
      </div>
    </div>
  </div>
</template>

script部分

<script>
export default {
  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>

https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/WebAPIService/Vue/Light/
https://www.swiper.com.cn/demo/index.html