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

演示图片

点击角色管理栏，内容跳转滑动到内容管理

点击消息中心滑动到消息中心内容

在Vue中新建一个XX.vue文件

<template>
  <div>
    <div class="line"></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 index="1"><a href="#page-1">申请领料</a></el-menu-item>
      <el-menu-item index="2"><a href="#page-2">料车管理</a></el-menu-item>
      <el-menu-item index="3"><a href="#page-3">角色管理</a></el-menu-item>
      <el-menu-item index="4"><a href="#page-4">BOM信息</a></el-menu-item>
      <el-menu-item index="5"><a href="#page-5">消息中心</a></el-menu-item>
      <el-menu-item index="6"><a href="#page-6">订单管理</a></el-menu-item>
      <el-menu-item index="7"><a href="#page-7"></a></el-menu-item>
    </el-menu>

    <!-- ----------------------------------------------------------------------------- -->
    <scroll-container>
      <scroll-page id="page-1">
        <div class="contentOne">
          <div class="contA">申请领料</div>
          <div class="contB">申请领料</div>
        </div>
      </scroll-page>

      <scroll-page id="page-2">
        <div class="contentOne">
          <div class="contA">料车管理</div>
          <div class="contB">料车管理</div>
        </div>
      </scroll-page>
      <scroll-page id="page-3">
        <div class="contentOne">
          <div class="contA">角色管理</div>
          <div class="contB">角色管理</div>
        </div>
      </scroll-page>
      <scroll-page id="page-4">
        <div class="contentOne">
          <div class="contA">BOM信息</div>
          <div class="contB">BOM信息</div>
          <div class="contC">BOM信息</div>
        </div>
      </scroll-page>
      <scroll-page id="page-5">
        <div class="contentOne">
          <div class="contA">消息中心</div>
          <div class="contB">消息中心</div>
          <div class="contC">消息中心</div>
        </div>
      </scroll-page>
      <scroll-page id="page-6">
        <div class="contentOne">
          <div class="contA">订单管理</div>
          <div class="contB">订单管理</div>
          <div class="contC">订单管理</div>
        </div>
      </scroll-page>
      <scroll-page id="page-7">
        <div class="contentOne"></div>
      </scroll-page>
    </scroll-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
    };
  },
};
</script>

<style scoped>
scroll-container {
  display: block;
  width: 100%;
  height: 570px;
  overflow-y: scroll;
  scroll-behavior: smooth;
}

scroll-page {
  display: flex;
  /* align-items: center;
  justify-content: center; */
  height: 50%;
  width: 100%;
}
.el-menu {
  padding-left: 500px;
}
.el-menu-item {
  margin-left: 10px;
}
a {
  display: block;
  text-decoration: none;
}
.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>

亲测这个是可以实现锚点定位的，也有平滑处理，这是CSS自带的属性，平滑性好，但是可能对浏览器的兼容性差一点，IE不兼容，这种比较简单；也可以用JS动画来实现，兼容性好，后续写出来…