简易锚点导航

<template>
  <div style="padding: 10px 0px;margin-top: 10px;">
    <div class="left">
      <span class="left_radio"></span>
      <ul class="menu">
        <li
          v-for="(item, index) in textInfo"
          :key="index"
          v-scroll-to="{ element: '#v' + index, offset: -10 }"
          :class="{ active: index == isActive }"
          @click="liBtn(index)"
        >
          {{ item.title }}
          <i :class="{ active: index == isActive }" class="icon">●</i>
        </li>
      </ul>
      <span class="left_radio"></span>
    </div>
    <el-card class="cardBox">
      <div
        v-for="(item, index) in textInfo"
        :key="index"
        :id="'v' + index"
        style="height: 200px"
      >
        <!-- :id="'id'+index" -->
        <div class="cardBox_info">
          <p class="info_title">【{{ item.title }}】</p>
          <span class="info_text">{{ item.text }}</span>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import Vue from "vue";
import VueScrollTo from "vue-scrollto";

Vue.use(VueScrollTo, options);

let options = {
  container: "body", //滚动的容器
  duration: 50, //滚动时间
  easing: "ease", //缓动类型
  offset: 0, //滚动时应应用的偏移量。此选项接受回调函数
  force: true, //是否应执行滚动
  cancelable: true,
  onStart: false,
  onDone: false,
  onCancel: false,
  x: false,
  y: true,
};
export default {
  data() {
    return {
      isActive: 0,
      listBoxState: true,
      textInfo: [
        { stepId: "1", title: "A", text: "123" },
        { stepId: "2", title: "B", text: "123" },
        { stepId: "3", title: "C", text: "123" },
        { stepId: "4", title: "D", text: "123" },
        { stepId: "5", title: "E", text: "123" },
        { stepId: "6", title: "F", text: "123" },
        { stepId: "7", title: "G", text: "123" },
        { stepId: "8", title: "H", text: "123" },
        { stepId: "9", title: "I", text: "123" },
        { stepId: "10", title: "G", text: "123" },
        { stepId: "11", title: "K", text: "123" },
        { stepId: "12", title: "L", text: "123" },
      ],
    };
  },
  methods: {
    scrollToTop() {
      var domHight = document.body.offsetHeight;
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;

      if (this.listBoxState) {
        //作用是点击导航栏时，延迟这里执行。
        this.textInfo.map((v, i) => {
          // 获取监听元素距离视窗顶部距离
          var offsetTop = document.getElementById(`v${i}`).offsetTop;
          // 获取监听元素本身高度
          var scrollHeight = document.getElementById(`v${i}`).scrollHeight;
          console.log(scrollHeight);

          // 如果 dom滚动位置 >= 元素距离视窗距离 && dom滚动位置 <= 元素距离视窗距离+元素本身高度
          // 则表示页面已经滚动到可视区了。
          if (scrollTop >= offsetTop && scrollTop <= offsetTop + scrollHeight) {
            // 导航栏背景色选中

            this.isActive = i;
            console.log(this.isActive);
          }
        });
      }
    },
  },
  mounted() {
    let timeId;
    window.addEventListener(
      "scroll",
      () => {
        clearTimeout(timeId);
        timeId = setTimeout(() => {
          this.scrollToTop();
          console.log("执行完了哦");
        }, 10);
      },
      true
    );
  },
};
</script>
<style scoped lang="scss">
@media screen and (max-width: 1600px) {
  .left {
    padding-left: 75px !important;
  }
}
.cardBox {
  width: 1100px;
  margin: auto;
  padding: 0px 15px;
  margin-bottom: 20px;
  margin-top: 20px;

  .cardBox_head {
    border-bottom: 1px solid #e9e9e9;
    .cardBox_head_title {
      font-size: 28px;
    }
    .cardBox_head_title_icon{
      display: inline-block;
      width: 69px;
      height: 23px;
      margin-left: 19px;
      span{
        font-size: 14px;
        color: #ffff;
        position: absolute;
        z-index: 1;
        text-align: center;
        margin-left: 21px;
        margin-top: 7px;
      }
      i{
        font-size: 23px;
        color: #9CB5D3;
        position: relative;
      }
    }
    .cardBox_head_text {
      display: flex;
      margin: 25px 0px;
      line-height: 24px;
      .cardBox_head_text_book {
        width: 76px;
        height: 24px;
        background: #ffa900;
        font-size: 14px;
        color: #ffffff;
        text-align: center;
        line-height: 24px;
        margin-right: 12px;
      }
      .cardBox_head_text_span {
        padding-right: 10px;
        margin-right: 10px;
        border-right: 1px solid #999999;
        font-size: 14px;
        color: #999999;
      }
      .cardBox_head_text_span:last-child {
        border-right: none;
      }
    }
  }
  .cardBox_info {
    .info_title {
      font-size: 16px;
      font-weight: 600;
      color: #333333;
    }
    .info_text {
      font-size: 16px;
    }
  }
}
.left {
  position: fixed;
  display: flex;
  flex-direction: column;
  padding-left: 260px;
  padding-top: 20px;
  .menu {
    height: 576px;
    padding: 16px 9px;
    list-style: none;
    font-size: 14px;
    border-right: 1px solid #b4c3da;
    margin-right: 15px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-top: 0px;
    margin-bottom: 0px;
  }
  .menu li {
    cursor: pointer;
    text-align: right;
    .icon {
      color: #b4c3da;
      position: absolute;
      margin-left: 3.5px;
      font-size: 20px;
      line-height: 19px;
    }
  }
  .active {
    color: #4e8cee !important;
  }
  .return,
  .down {
    width: 80px;
    height: 36px;
    background: #ffffff;
    border: 1px solid #8bb3f2;
    border-radius: 4px;
    line-height: 36px;
    text-align: center;
    color: #4786ea;
    font-size: 14px;
    margin: 9px 16px;
  }
  .left_radio {
    width: 12px;
    height: 12px;
    background: #eef3f9;
    border: 2px solid #b4c3da;
    border-radius: 6px;
    float: right;
    margin-left: 22.5px;
  }
}
</style>

本人小白，代码仅供参考（部分借鉴）https://www.cnblogs.com/CATyaya/p/15764406.htmlhttps://www.cnblogs.com/CATyaya/p/15764406.html