浅浅记录一下实现锚点定位

最新推荐文章于 2024-07-08 18:51:22 发布

西瓜有点饿

最新推荐文章于 2024-07-08 18:51:22 发布

阅读量169

点赞数 3

分类专栏：技术总结文章标签：前端

本文链接：https://blog.csdn.net/xxuxioxx/article/details/139750719

版权

技术总结专栏收录该内容

13 篇文章 0 订阅

订阅专栏

如图，左边是一个快捷导航，右边是主体内容（每个卡片对应一个小导航）

直接上代码分析

左边的导航侧由静态数据循环生成（当前选中有蓝色背景样式，还有不可点击样式）

<div class="word-tip-box">
    <div v-for="(item,index) in circleList" :key="index">
        <p :class="{'active': activeStep==item.id,'no-pointer f16':index===0||index===7}"
            @click="handleJump(item.id)">{{ item.name }}</p>
    </div>
</div>

右边主体内容为一个个对应的卡片，每个卡片有唯一的id，对应静态数据的id

点击方法

handleJump(id) {
    if(id==='num1'||id==='num8') return
    this.activeStep = id
    const box = document.getElementById('scroll-box')
    let scrollItem = document.getElementById(id)
    let offsetTop = scrollItem.offsetTop - 60 -10
    box.scrollTo({
        top: offsetTop,
        behavior: 'smooth'
    })
},