基于vue监听滚动事件，实现锚点内容平滑滚动，动态修改锚点状态

最新推荐文章于 2024-01-12 15:31:13 发布

As Before ~

最新推荐文章于 2024-01-12 15:31:13 发布

阅读量996

点赞数

分类专栏： Vue开发文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/happyStudy_/article/details/122383189

版权

本文介绍了如何在Vue项目中利用滚动事件监听实现锚点链接的平滑滚动效果，并动态修改锚点状态。场景为报告目录与内容的同步滚动，当点击目录或内容滚动时，相应锚点能正确高亮并准确定位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于vue监听滚动事件，实现锚点链接平滑滚动，动态修改锚点状态，锚点定位（双向）

项目场景：报告目录内容框滚动，动态修改目录章节的锚点状态，点击目录章节的锚点，滚动到目标内容

项目场景实例图

点击右边对应的章节，左边内容区域滚动到对应内容区域
左边内容区域滚动内容，右边的章节锚点动态修改

问题描述：

内容平滑滚动，瞄点状态修改，监听内容高度，滚动距离

解决方案：

//左侧内容框
<div>
  <h2>{
   {
   result.name}}</h2>
  <ul>
    <li v-for="(item,i) in rep_tab_cont" :key="i" :index="item.id" class="jump">
      <h3>{
   {
   item.title}}</h3>
      <pre>{
   {
   item.content}}</pre>
    </li>
  </ul>
</div>
//右侧目录章节
<div class="float_fixed">
     <p class="title">目录章节</p>
      <ul>
        <li 
        :class