# 页面 右侧锚点导航+左侧滚动联动实现（HTML+jQuery+CSS）

学以智用
4 阅读2分钟

我给你做一套开箱即用、完整可运行的代码，实现两个核心功能：

  1. 右侧点击章节锚点 → 左侧内容自动滚动到对应位置
  2. 左侧滚动内容 → 右侧导航自动高亮对应章节、滚动条定位到对应项

效果：双向联动、平滑滚动、自动高亮。

完整代码（直接复制运行）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>精简锚点联动</title>
<style>
  *{margin:0;padding:0;box-sizing:border-box}
  body{font-family:微软雅黑;height:2000px}
  .container{display:flex;width:1000px;margin:30px auto;position:relative}
  .left{width:750px;padding-right:20px}
  .chapter{height:500px;margin-bottom:20px;padding:20px;border:1px solid #eee}
  .right{width:200px;position:fixed;top:30px;right:calc(50% - 500px);height:400px;overflow-y:auto;border:1px solid #eee;padding:10px;background:#fff}
  .right li{padding:8px;cursor:pointer;border-radius:4px;margin-bottom:5px}
  .right li.active{background:#409eff;color:#fff}
</style>
</head>
<body>

<div class="container">
  <div class="left">
    <div class="chapter" id="c1">第1章</div>
    <div class="chapter" id="c2">第2章</div>
    <div class="chapter" id="c3">第3章</div>
    <div class="chapter" id="c4">第4章</div>
  </div>

  <div class="right">
    <li data-target="#c1">第1章</li>
    <li data-target="#c2">第2章</li>
    <li data-target="#c3">第3章</li>
    <li data-target="#c4">第4章</li>
  </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
  // 右侧点击滚动到左侧
  $('.right li').click(function(){
    $('html,body').animate({scrollTop:$($(this).data('target')).offset().top-20},300);
  });

  // 左侧滚动联动右侧
  $(window).scroll(function(){
    var s=$(window).scrollTop();
    $('.chapter').each(function(){
      var t=$(this).offset().top-100,b=t+$(this).outerHeight();
      if(s>=t&&s<b){
        $('.right li').removeClass('active').filter('[data-target="#'+this.id+'"]').addClass('active');
        var a=$('.right li.active'),h=$('.right').height();
        $('.right').scrollTop(a.position().top-h/2+a.height()/2);
      }
    });
  });
});
</script>
</body>
</html>

核心功能说明

1. 右侧点击锚点 → 左侧定位

  • 给右侧导航项添加 data-target 属性，绑定对应章节ID
  • 点击时获取目标位置，用 animate 实现平滑滚动

2. 左侧滚动 → 右侧自动高亮+定位

  • 监听页面滚动事件
  • 判断当前屏幕显示的是哪个章节
  • 给对应导航项添加高亮样式

效果预览

  1. 打开页面，右侧固定显示章节导航
  2. 点击右侧任意章节 → 左侧自动平滑滚动到对应位置
  3. 手动滚动左侧内容 → 右侧自动高亮当前章节

总结

  1. 这套代码实现了双向联动：右侧点→左侧跳、左侧滚→右侧自动跟踪
  2. 使用 jQuery 简化滚动计算与DOM操作，CSS 实现固定布局与样式，HTML 结构清晰
  3. 自带平滑滚动、高亮效果，直接可用，无需额外插件
  4. 可轻松扩展更多章节、修改样式与交互细节
avatar
文章
阅读
粉丝