[JavaScript知识库] vue实现锚点定位跳转，a标签实现锚点定位跳转

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue实现锚点定位跳转，a标签实现锚点定位跳转 -> 正文阅读

[JavaScript知识库]vue实现锚点定位跳转，a标签实现锚点定位跳转

先看一下效果图，点击右侧导航栏，左侧显示相应的版块内容

a标签锚点定位跳转

看代码,我这里用的循环，原理很简单，a标签绑定需要跳转到内容div的id,每一个内容div绑定一个唯一id，即可实现点击跳转

		<!-- 右侧悬浮导航栏 -->
          <div v-for="(item,indext) in fixList" :key="indext">
            <a :href="'#type-' + indext">
             {{item.title}}
            </a>
          </div>
          <div>
            <div>
              <div style="font-size:20px;" class="center"><i class="el-icon-arrow-up"></i></div>
              <div class="center">顶部</div>
            </div>
          </div>
        <!-- 商品大类分类 -->
        <div v-for="(item,index) in fixList" :key="index" :name="'type-' + index" :id="'type-' + index">
        内容......
        </div>