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

最新推荐文章于 2024-01-03 15:15:40 发布

原创最新推荐文章于 2024-01-03 15:15:40 发布 · 362 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

前端专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一种利用Vue.js实现网页中平滑滚动效果的方法，并通过监听滚动事件来高亮当前导航项，增强用户体验。具体实现包括定义滚动方法、监听页面滚动以及设置导航项的样式变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>