本文详解了如何仅用纯 CSS 实现网页内点击链接后平滑滚动至指定区域的优雅方案——无需一行 JavaScript，只需为目标元素设置唯一 ID、在链接 href 中使用对应锚点，并在 html 元素上添加 `scroll-behavior: smooth`，即可获得原生、语义化、SEO 友好且无障碍兼容的流畅滚动体验，同时覆盖主流浏览器并附有完整可运行示例与关键注意事项，是现代前端开发中轻量高效、标准合规的必备技巧。

本文介绍如何在 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（<15.4）或 IE，可添加轻量级 JS 回退（例如 element.scrollIntoView({ behavior: 'smooth' })），但绝大多数现代项目已无需；
• 性能友好：纯 CSS 方案无 JS 执行开销，滚动由浏览器渲染引擎优化，帧率稳定，体验更原生。

✅ 总结

无需引入框架或编写事件监听器，HTML 锚点 + scroll-behavior: smooth 就是实现页面内平滑滚动的黄金组合。它语义清晰、代码简洁、性能优异，且完全符合 Web 标准。在构建响应式官网、产品介绍页或文档站点时，应优先采用此方案。

好了，本文到此结束，带大家了解了《纯CSS实现平滑滚动跳转技巧》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！