本文介绍如何在 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 标准。在构建响应式官网、产品介绍页或文档站点时，应优先采用此方案。