本文介绍如何在 html 页面中实现点击链接后平滑滚动至指定区域，无需 javascript，仅通过语义化 id 锚点与 `scroll-behavior: smooth` 即可完成。
在现代网页开发中，单页应用（SPA）风格的导航常需支持“点击跳转到页面某一部分”并保持流畅体验。一个典型场景是：页脚中的「关于我们」链接，点击后应平滑滚动至页面中对应的内容区块。实现该功能最简洁、标准且兼容性良好的方式，是结合 HTML 锚点（id）与 CSS 的滚动行为控制。
✅ 正确做法：使用 id + href 锚点 + scroll-behavior
首先，为需要滚动到达的目标元素设置唯一 id（注意：不要用 class 替代 id，因为锚点链接依赖 id 的全局唯一性）：
<section id="aboutUs"> <h2>关于我们</h2> <p>这里是公司简介……</p> </section>
然后，在触发滚动的链接中，使用 # 加上对应 id 作为 href 值：
立即学习“前端免费学习笔记（深入）”；
<footer> <a href="#aboutUs">关于我们</a> </footer>
最后，启用浏览器原生的平滑滚动效果——只需一行 CSS：
html {
scroll-behavior: smooth;
}? 提示：该样式需作用于 html 元素（而非 body），以确保整个视口滚动生效；目前所有主流浏览器（Chrome 61+、Firefox 68+、Edge 79+、Safari 15.4+）均已支持。
? 完整可运行示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>平滑滚动示例</title>
<style>
html { scroll-behavior: smooth; }
section {
min-height: 100vh;
padding: 2rem;
border-bottom: 1px solid #eee;
}
</style>
</head>
<body>
<nav>
<a href="#home">首页</a> |
<a href="#aboutUs">关于我们</a> |
<a href="#contact">联系我们</a>
</nav>
<section id="home"><h1>欢迎来到首页</h1></section>
<section id="aboutUs"><h2>关于我们</h2><p>我们是一家专注于前端体验的团队……</p></section>
<section id="contact"><h2>联系我们</h2><p>邮箱：hello@example.com</p></section>
</body>
</html>⚠️ 注意事项与最佳实践
- 避免重复 id：每个 id 在页面中必须唯一，否则锚点行为不可预测；
- 慎用 class 模拟锚点：虽然可通过 JS 绑定 scrollIntoView() 实现，但丧失语义、SEO 友好性及无障碍访问（如屏幕阅读器对 id 锚点有原生支持）；
- 兼容性兜底：若需支持旧版 Safari（
- 性能友好：纯 CSS 方案无 JS 执行开销，滚动由浏览器渲染引擎优化，帧率稳定，体验更原生。
✅ 总结
无需引入框架或编写事件监听器，HTML 锚点 + scroll-behavior: smooth 就是实现页面内平滑滚动的黄金组合。它语义清晰、代码简洁、性能优异，且完全符合 Web 标准。在构建响应式官网、产品介绍页或文档站点时，应优先采用此方案。
