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