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

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

直接上代码分析

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

<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') returnthis.activeStep = idconst box = document.getElementById('scroll-box')let scrollItem = document.getElementById(id)let offsetTop = scrollItem.offsetTop - 60 -10box.scrollTo({top: offsetTop,behavior: 'smooth'})
},