无需 javascript，仅用语义化 html 锚点 + css `scroll-behavior: smooth` 即可实现点击导航链接后页面平滑滚动至目标区块，简洁高效且兼容现代浏览器。
在前端开发中，为单页应用（SPA）或长内容首页添加“回到顶部”“跳转至关于我们”等锚点导航功能，是提升用户体验的基础实践。传统做法常依赖 JavaScript 监听点击事件并调用 element.scrollIntoView()，但现代标准已提供更轻量、声明式的替代方案——原生平滑滚动（Native Smooth Scrolling）。
✅ 核心实现：ID 锚点 + CSS 全局滚动行为
关键在于两点：
- 目标区块使用 id（而非 class）作为唯一标识符 —— 因为 中的 # 语法仅匹配 id 属性；
- 全局启用平滑滚动行为 —— 通过 CSS 设置 html { scroll-behavior: smooth; }，作用于所有基于 # 的跳转。
示例代码如下：
/* 启用整页平滑滚动 */
html {
scroll-behavior: smooth;
}
/* 可选：确保各区块有足够高度，便于视觉验证滚动效果 */
section {
min-height: 100vh;
padding: 2rem;
}欢迎来到我们的网站
关于我们
我们是一家致力于……
立即学习“前端免费学习笔记（深入）”；
联系我们
邮箱：hello@example.com
✅ 优势说明：该方案零 JS 依赖，语义清晰，SEO 友好，且自动支持浏览器前进/后退、地址栏手动输入 #aboutUs 等原生导航行为。
⚠️ 注意事项与兼容性提醒
- 浏览器支持：scroll-behavior 已被 Chrome 61+、Firefox 36+、Edge 79+、Safari 15.4+ 原生支持；如需兼容 Safari 15.3 及更早版本，可添加渐进增强处理（见下文）；
- ID 唯一性：确保每个 id 在页面中唯一，避免重复导致跳转异常；
- 无障碍访问：锚点跳转天然支持键盘 Tab 导航与屏幕阅读器，无需额外 ARIA 属性；
- 性能提示：避免在 scroll-behavior: smooth 同时大量触发 scroll 事件监听，因其本身已由浏览器优化。
? 进阶建议（可选）
若需兼容旧版 Safari 或自定义滚动时长/缓动函数，可结合 JavaScript 使用 scrollIntoView()：
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
const targetId = this.getAttribute('href').substring(1);
const targetEl = document.getElementById(targetId);
if (targetEl) {
targetEl.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});但对绝大多数现代项目而言，纯 CSS 方案已足够健壮、简洁且可靠——优先用标准，而非绕路写 JS。
掌握这一技巧，你就能在几行代码内完成专业级页面内导航体验。
