本文介绍如何在网页中实现点击链接后平滑滚动至目标区块的效果，无需javascript，仅通过html语义化id锚点与css `scroll-behavior: smooth` 即可完成，简洁、高效且兼容现代浏览器。
在构建单页网站（如企业官网首页）时，常需通过页脚“关于我们”“服务介绍”等导航链接，一键跳转至页面对应区块，并伴随自然流畅的滚动动画。传统做法依赖JavaScript监听点击事件并调用 element.scrollIntoView()，但现代浏览器已原生支持更轻量、更可靠的纯CSS方案。
核心原理非常简洁：使用唯一 id 定义目标区块，通过 创建锚点链接，并启用全局平滑滚动行为。注意：不应使用 class 作为滚动目标——因为 class 可重复、无唯一性，而 href 锚点机制严格依赖 id 的唯一标识能力。
✅ 正确实现步骤
-
为目标区块设置唯一 id（非 class）
关于我们
这里是公司简介内容...
立即学习“前端免费学习笔记（深入）”；
-
创建指向该 id 的链接
-
启用全局平滑滚动（关键CSS）
html { scroll-behavior: smooth; /* ⚠️ 必须作用于 html 元素 */ } /* 可选：确保各区块有足够高度，便于视觉验证滚动效果 */ section { min-height: 100vh; padding: 2rem 0; }
? 小贴士：scroll-behavior: smooth 目前在所有主流浏览器（Chrome 61+、Firefox 36+、Edge 79+、Safari 15.4+）中均受支持。如需兼容 Safari 15.3 及更早版本，可添加轻量JS降级方案（见文末补充）。
❌ 常见误区提醒
- 误用 class 替代 id： 无法触发原生锚点滚动，且不符合HTML规范；
- 将 scroll-behavior 写在 body 或其他元素上：该属性仅对根滚动容器（即 html）生效；
- ID 值含空格或特殊字符：应使用连字符（如 id="our-team"），避免 id="Our Team"（空格会导致选择器失效）；
- 多个相同 id：违反HTML唯一性约束，可能导致滚动行为不可预测。
? 补充：优雅降级（可选）
若需支持旧版 Safari（
if (!CSS.supports('scroll-behavior', 'smooth')) {
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function(e) {
e.preventDefault();
const target = document.querySelector(this.getAttribute('href'));
if (target) {
target.scrollIntoView({ behavior: 'smooth' });
}
});
});
}
综上，平滑页面内跳转无需复杂逻辑——合理运用语义化HTML锚点与现代CSS特性，即可在零JS负担下交付专业级用户体验。推荐优先采用 html { scroll-behavior: smooth } 方案，并辅以语义清晰的 id 结构，兼顾可访问性、性能与维护性。
