scrollIntoView锚点跳转超好用

最新推荐文章于 2024-05-22 13:52:22 发布

前端攻城狮·左大

最新推荐文章于 2024-05-22 13:52:22 发布

阅读量168

点赞数

分类专栏：移动端文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46719868/article/details/126732546

版权

移动端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

  <!-- 锚点区 -->
      <ul class="header-nav">
        <li v-for="(item,i) in typeList" :key="i" :class="now === i ? 'active' : ''"
            @click="scrollToPosition(i)">
          {{item.name}}
          <div class="btm"></div>
        </li>
      </ul>
  <!-- 内容区域 -->
      <div class="typeList">
        <div v-for="(vl,i) in typeListNew" :key="i" class="roll">
          <span class="newuse">{{vl.title}}</span>
          <div class="typeContent" v-for="(item,i) in vl.list" :key='i'>
            <div class="left"></div>
            <div class="right">
              <div class="top">{{item.typeNeme}}</div>
              <div class="btm">{{item.MS}}</div>
            </div>

          </div>

        </div>
      </div>

scrollToPosition(i) {
      this.now = i
      document.getElementsByClassName('roll')[i].scrollIntoView({
        behavior: 'smooth', // 平滑过渡
        block: 'start' // 上边框与视窗顶部平齐。默认值
      })
    },