本文介绍如何在不触发整页滚动的前提下，让点击左侧导航时仅对右侧内容区域进行局部平滑滚动，利用原生 HTML 锚点 + CSS scroll-behavior 即可优雅解决，无需复杂 JavaScript 计算。

本文介绍如何在不触发整页滚动的前提下，让点击左侧导航时仅对右侧内容区域进行局部平滑滚动，利用原生 html 锚点 + css `scroll-behavior` 即可优雅解决，无需复杂 javascript 计算。

在构建侧边导航+内容区布局（如文档阅读页、产品功能介绍页）时，一个常见需求是：点击左侧 .link_div 中的链接，只让右侧 .content_div 区域内部滚动到对应 <div id="sectionX">，而不是让整个 <code> 滚动——后者会破坏固定头部、遮挡导航栏，影响用户体验。

遗憾的是，许多开发者尝试用 window.scrollTo() 或手动计算 scrollTop，却忽略了更简洁、标准且可靠的原生方案：HTML 锚点跳转 + 局部滚动容器控制。

✅ 正确做法：锚点 + 局部滚动容器 + 平滑行为

关键在于两点：

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

1. 将 .content_div 设置为可滚动容器（需显式定义 overflow-y: auto 及固定高度/最大高度）；
2. 使用 <a href="#sectionX"></a> 链接指向同页面内 id，并启用 scroll-behavior: smooth。

⚠️ 注意：scrollIntoView() 和 window.scrollTo() 默认作用于 window 或 document.scrollingElement，若未指定滚动容器，必然导致整页滚动。而原生锚点跳转会自动识别最近的可滚动祖先容器（前提是该容器满足滚动条件）。

✅ 完整示例代码

<style>
  /* 启用全局平滑滚动（可选，增强体验） */
  html {
    scroll-behavior: smooth;
  }

  /* 确保 content_div 是独立滚动容器 */
  .content_div {
    overflow-y: auto;
    max-height: 70vh; /* 根据实际布局设定合理高度 */
    scrollbar-width: thin; /* Firefox */
  }
  .content_div::-webkit-scrollbar {
    width: 6px;
  }
  .content_div::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
  }

  /* 仅为演示添加视觉区分 */
  .content_div > div {
    border: 2px dashed #4a5568;
    min-height: 60vh;
    padding: 2rem;
    font-size: 1.2rem;
  }
</style>

<div class="row d-flex">
  <div class="col-3 link_div position-sticky">
    <ul>
      <li><a href="#section1">Section 1</a></li>
      <li><a href="#section2">Section 2</a></li>
      <li><a href="#section3">Section 3</a></li>
      <li><a href="#section4">Section 4</a></li>
      <li><a href="#section5">Section 5</a></li>
    </ul>
  </div>
  <div class="col-9 content_div">
    <div id="section1">? 内容区块一：产品概览</div>
    <div id="section2">? 内容区块二：核心功能</div>
    <div id="section3">? 内容区块三：技术架构</div>
    <div id="section4">? 内容区块四：客户案例</div>
    <div id="section5">? 内容区块五：联系我们</div>
  </div>
</div>

? 为什么这样能“局部滚动”？

• 浏览器解析 <a href="#section2"></a> 时，会查找 id="section2" 的元素；
• 若该元素位于某个 具有 overflow-y: auto/scroll 且高度受限的父容器内（即 .content_div），浏览器将优先在此容器内执行滚动定位，而非向上遍历至 body；
• scroll-behavior: smooth 则确保该滚动具备动画过渡效果。

❌ 常见错误与规避建议

• 错误1：.content_div 缺少 overflow-y 或高度约束 → 容器无法滚动，锚点失效或回退至整页滚动。
  ✅ 解决：务必设置 max-height + overflow-y: auto。

• 错误2：使用 onclick 调用 JS 函数但未阻止默认行为，或误操作 window.scrollTo。
  ✅ 解决：优先用语义化 <a></a> 标签，零 JS 更可靠；如必须用 JS，请调用 element.scrollIntoView({ block: 'start', behavior: 'smooth' }) 并确保 element 的最近可滚动祖先为 .content_div（可通过 element.closest('.content_div')?.scrollTop = ... 手动控制）。

• 错误3：ID 值未加引号（如 onclick="showSection(section1)"）→ JS 报错，section1 被当作变量而非字符串。
  ✅ 解决：应写为 onclick="showSection('section1')"，但——再次强调，你根本不需要这段 JS。

✅ 总结

方案	是否推荐	说明
原生 <a href="#id"></a> + scroll-behavior: smooth + .content_div { overflow-y: auto }	✅ 强烈推荐	语义清晰、兼容性好（Chrome 61+/Firefox 68+/Safari 15.4+）、无 JS 依赖、自动适配局部滚动
element.scrollIntoView()（作用于 .content_div 内部）	⚠️ 可选	需手动获取容器并调用，易出错；适合需动态逻辑（如权限校验后滚动）的场景
window.scrollTo() 手动计算偏移	❌ 不推荐	易受 header/sticky 元素干扰，维护成本高，违反关注点分离原则

用最简的 HTML 和 CSS，达成最稳健的效果——这正是现代 Web 开发推崇的“渐进增强”实践。现在，就删掉那几行冗余的 JavaScript，让浏览器替你完成精准、平滑、局部的滚动吧。