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

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

直接上代码分析

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

<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'
    })
},