如果您的项目中没有使用Hash路由，可以使用纯css实现，具体操作请参照scroll-behavior 如果您的项目跟我目前一样，使用的是vue的Hash路由，可以参考以下方法 最终效果示意： 主要是要实现两个功能点是： 点击左侧导航，右侧会滚动到指定位置 右侧滚动到相应位置时，实现左侧导航的动态更新 使用技术： 实现功能1需要js的scrollIntoView方法，让指定元素调用这个方法可以滚动到视图区 GIF 实现功能2需要使用js的IntersectionObserver接口，通过监听目标元素滚动到视图区的时机，然后实现自己的功能。 我目前使用的是组件封装： 1722325023305 LineTime组件代码如下： <!-- @Author: Laucher @Date: 2024/7/29 @Description: 時間綫組件 --> <template> <n-timeline :icon-size="20"> <n-timeline-item v-for="(item, index) in behaviorRecordList" :key="item.id" :style="{ '--n-line-color': getColorByLevel(index), '--n-line-color-thin': darkenColor(getColorByLevel(index),100), '--n-line-color-op': hexToRgba(getColorByLevel(index),0.2) }" > <template ...