SOURCE

console.clear();
var Main = {
   data() {
    return {
      data: [
        { name: "第一节", id: "1" },
        { name: "第二节", id: "2" },
        { name: "第三节", id: "3" },
        { name: "第四节", id: "4" },
        { name: "第五节", id: "5" },
        { name: "第六节", id: "6" },
        { name: "第七节", id: "7" },
        { name: "第八节", id: "8" },
      ],
      active: 0,
    };
  },
  watch: {},
  computed: {},
  mounted() {
    // this.onScroll();
  },
  destroyed() {
    window.removeEventListener("scroll", this.onScroll);
  },
  created() {
    window.addEventListener("scroll", this.onScroll);
  },

  methods: {
    onScroll(e) {
      const navContents = document.querySelectorAll(".articles");

      const offsetTopArr = [];

      navContents.forEach((item) => {
        offsetTopArr.push(item.offsetTop);
      });

      //   let aa = document.getElementById("article");
      //   const scrollTop = aa.pageYOffset;

      const scrollTop =
        e.target.scrollTop ||
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop; // 滚动条偏移量
      if (!scrollTop) {
        return;
      }

      let navIndex = 0;
      for (let n = 0; n < offsetTopArr.length; n++) {
        if (scrollTop >= offsetTopArr[n]) {
          navIndex = n;
        }
      }
      //   let nn = offsetTopArr.length;
      //   if (offsetTopArr[nn - 1] < scrollTop < offsetTopArr[nn]) {
      //     navIndex = nn + 1;
      //   }
      //   console.log(scrollTop, window, offsetTopArr);
      this.active = navIndex;
    },
    toToc(a) {
      let as = "#" + a.name;

      document.querySelector(as).scrollIntoView({
        behavior: "smooth", // 平滑过渡
      });
    },
  },
}

var Ctor = Vue.extend(Main);
var app = new Ctor().$mount('#app');

<div id="app">
 <div style="position: relative">
    <div class="header">
        VUE 实现双向自动锚点同步功能
    </div>

    <div class="main">
      <!-- 内容区域 -->
      <div class="article">
        <section v-for="(item, i) in data" :key="i">
          <h1 :id="item.name" class="articles">{{ item.name }}</h1>
          <article class="gushi">
            <p>
              豫章故郡，洪都新府。星分翼轸，地接衡庐。襟三江而带五湖，控蛮荆而引瓯越。物华天宝，龙光射牛斗之墟；人杰地灵，徐孺下陈蕃之榻。雄州雾列，俊采星驰。台隍枕夷夏之交，宾主尽东南之美。都督阎公之雅望，棨戟遥临；宇文新州之懿范，襜帷暂驻。十旬休假，胜友如云；千里逢迎，高朋满座。腾蛟起凤，孟学士之词宗；紫电青霜，王将军之武库。家君作宰，路出名区；童子何知，躬逢胜饯。
            </p>
            <p>
              时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。层峦耸翠，上出重霄；飞阁流丹，下临无地。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。
            </p>
            <p>
              披绣闼，俯雕甍，山原旷其盈视，川泽纡其骇瞩。闾阎扑地，钟鸣鼎食之家；舸舰弥津，青雀黄龙之舳。云销雨霁，彩彻区明。落霞与孤鹜齐飞，秋水共长天一色。渔舟唱晚，响穷彭蠡之滨；雁阵惊寒，声断衡阳之浦。
              <br />
            </p>
            <p>
              遥襟甫畅，逸兴遄飞。爽籁发而清风生，纤歌凝而白云遏。睢园绿竹，气凌彭泽之樽；邺水朱华，光照临川之笔。四美具，二难并。穷睇眄于中天，极娱游于暇日。天高地迥，觉宇宙之无穷；兴尽悲来，识盈虚之有数。望长安于日下，目吴会于云间。地势极而南溟深，天柱高而北辰远。关山难越，谁悲失路之人？萍水相逢，尽是他乡之客。怀帝阍而不见，奉宣室以何年？
              <br />
            </p>
            <p>
              嗟乎！时运不齐，命途多舛。冯唐易老，李广难封。屈贾谊于长沙，非无圣主；窜梁鸿于海曲，岂乏明时？所赖君子见机，达人知命。老当益壮，宁移白首之心？穷且益坚，不坠青云之志。酌贪泉而觉爽，处涸辙以犹欢。北海虽赊，扶摇可接；东隅已逝，桑榆非晚。孟尝高洁，空余报国之情；阮籍猖狂，岂效穷途之哭！
              勃，三尺微命，一介书生。无路请缨，等终军之弱冠；有怀投笔，慕宗悫之长风。舍簪笏于百龄，奉晨昏于万里。非谢家之宝树，接孟氏之芳邻。他日趋庭，叨陪鲤对；今兹捧袂，喜托龙门。杨意不逢，抚凌云而自惜；钟期既遇，奏流水以何惭？
              <br />
            </p>
            <p>
              呜乎！胜地不常，盛筵难再；兰亭已矣，梓泽丘墟。临别赠言，幸承恩于伟饯；登高作赋，是所望于群公。敢竭鄙怀，恭疏短引；一言均赋，四韵俱成。请洒潘江，各倾陆海云尔：
              滕王高阁临江渚，佩玉鸣鸾罢歌舞。 画栋朝飞南浦云，珠帘暮卷西山雨。
              <br />
            </p>
            <p>
              闲云潭影日悠悠，物换星移几度秋。 阁中帝子今何在？槛外长江空自流。
              <br />（此段教材无）
            </p>
          </article>
        </section>
      </div>
      <div class="card-anchor">
        <div class="titles cc">
          <ul>
            <li
              v-for="(item, i) in data"
              @click="toToc(item)"
              :key="i"
              :class="{ isSelect: active == i }"
            >
              {{ item.name }}
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="footer"></div>
  </div>
</div>
<script src="//unpkg.com/vue/dist/vue.js">

</script>
<!-- <script src="//unpkg.com/element-ui@2.5.4/lib/index.js">

</script> -->

* {
  box-sizing: border-box;
  outline: none;
  list-style-type: none;
  padding: 0;
  margin: 0;
  user-select: none;
  text-decoration: none;
}

.header {
  height: 120px;
  width: 100%;
  background-color: #037ef3;
  text-align: center;
  color: white;
  font-size: 30px;
  line-height: 120px;
}

.nav {
  width: 100%;
  height: 60px;
  background-color: #00c16e;
  opacity: 0.8;
  top: 0;
}

.main {
  min-height: 2000px;
  overflow: scroll;
  width: 100%;
}

.footer {
  width: 100%;
  height: 60px;
  background-color: #52565e;
}

.gushi {
  line-height: 2rem;
  text-indent: 2em;
  padding: 20px 100px;
}

.cc {
  cursor: pointer;
}

.article {
  padding-top: 70px;
}

.card-anchor {
  position: fixed;
  width: 120px;
  right: 0px;
  top: 30px;
  background: rgba(245, 245, 245, 0.548);
  border-radius: 10px;
  text-align: center;
}

.card-anchor .isSelect {
  background-color: #ff0000;
  color: white;
}

.card-anchor li {
  line-height: 2.5rem;
  border-radius: 10px;
}

.card-anchor li:hover {
  background-color: #ff0000;
  color: white;
}