比较友好的vue模拟双向锚点的功能

1、methods里面加上

  jump (index, type) {
      this.nowType = type
      document.querySelector('#' + type).scrollIntoView({
        behavior: 'smooth'
      })
    },
    onScroll () {
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      const _article = document.querySelectorAll('.d_jump')
      _article.forEach((item, index) => {
        if (scrollTop >= item.offsetTop) {
          this.activeStep = index
          console.info(index)
          this.nowType = item.getAttribute('id')
        }
        if (index === 0) {
          if (scrollTop < item.offsetTop) {
            this.nowType = ''
          }
        }
      })
    }

2、mounted里面加上

// 实例创建成功调用一次
    this.onScroll()
    this.$nextTick(function () {
      window.addEventListener('scroll', this.onScroll)
    })

3、html部分

整屏效果块使用 .d_jump类

导航使用jump（）方法

<HotNews index="1" class="d_jump" ref="hotNews" id="hotNews"></HotNews>
    <LiveClass index="2" class="d_jump" ref="liveClass" id="liveClass"></LiveClass>
    <WildAnimalLive index="3" class="d_jump" ref="wildAnimalLive" id="wildAnimalLive"></WildAnimalLive>
    <PhotoGallery index="4" class="d_jump" ref="photoGallery" id="photoGallery"></PhotoGallery>
    <DocumentaryFilm index="5" class="d_jump" ref="documentaryFilm" id="documentaryFilm"></DocumentaryFilm>
    <InterestingShortVideo index="6" class="d_jump" ref="interestingShortVideo" id="interestingShortVideo"></InterestingShortVideo>
    <OnlineMuseum v-if="false" index="7" class="d_jump" ref="onlineMuseum" id="onlineMuseum"></OnlineMuseum>
    <ExtinctAnimals index="8" class="d_jump" ref="extinctAnimals" id="extinctAnimals"></ExtinctAnimals>
    <FriendlyLink index="9" class="d_jump" ref="friendlyLink" id="friendlyLink"></FriendlyLink>
 <div class="flex fixed top-32 z-50 right-box flex-col text-center text-white bg-black bg-opacity-40 text-2xl rounded-24px px-10 py-16 font-bold" style="">
      <div class="mb-12 cursor-pointer" @click="jump('1','hotNews')" :style="{ 'color': nowType==='hotNews'? '#FFC400':'white'}">热点资讯</div>
      <div class="mb-12 cursor-pointer" @click="jump('2','liveClass')" :style="{ 'color': nowType==='liveClass'? '#FFC400':'white'}">公共科普直播课堂</div>
      <div class="mb-12 cursor-pointer" @click="jump('3','wildAnimalLive')" :style="{ 'color': nowType==='wildAnimalLive'? '#FFC400':'white'}">野生动物直播信号</div>
      <div class="mb-12 cursor-pointer" @click="jump('4','photoGallery')" :style="{ 'color': nowType==='photoGallery'? '#FFC400':'white'}">高清图片库</div>
      <div class="mb-12 cursor-pointer" @click="jump('5','documentaryFilm')" :style="{ 'color': nowType==='documentaryFilm'? '#FFC400':'white'}">纪录片</div>
      <div class="mb-12 cursor-pointer" @click="jump('6','interestingShortVideo')" :style="{ 'color': nowType==='interestingShortVideo'? '#FFC400':'white'}">趣味短视频</div>
      <div class="mb-12 cursor-pointer" @click="jump('7','onlineMuseum')" :style="{ 'color': nowType==='onlineMuseum'? '#FFC400':'white'}" v-if="false">线上博物馆</div>
      <div class="mb-12 cursor-pointer" @click="jump('8','extinctAnimals')" :style="{ 'color': nowType==='extinctAnimals'? '#FFC400':'white'}">已灭绝动物</div>
      <div class="mb-12 cursor-pointer" @click="jump('9','friendlyLink')" :style="{ 'color': nowType==='friendlyLink'? '#FFC400':'white'}">国内外资源网站</div>
      <div>
        <img src="http://cdn.nature.hanyastar.cn/test/template/round_top.png" class="w-16 mx-auto mb-1.5 cursor-pointer" @click="top()">
        top
      </div>
    </div>