无需 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;
}<!-- 导航链接（可位于页眉、页脚或任意位置） -->
<footer>
<a href="#aboutUs">关于我们</a>
<a href="#contact">联系我们</a>
</footer>
<!-- 页面内容区块 -->
<section id="home">
<h1>欢迎来到我们的网站</h1>
</section>
<section id="aboutUs">
<h2>关于我们</h2>
<p>我们是一家致力于……</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/745" title="What-the-Diff"><img
src="https://img.php.cn/upload/ai_manual/001/503/042/68b6dc516822a519.png" alt="What-the-Diff" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/745" title="What-the-Diff">What-the-Diff</a>
<p>检查请求差异，自动生成更改描述</p>
</div>
<a href="/ai/745" title="What-the-Diff" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</section>
<section id="contact">
<h2>联系我们</h2>
<p>邮箱：hello@example.com</p>
</section>✅ 优势说明：该方案零 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。
掌握这一技巧，你就能在几行代码内完成专业级页面内导航体验。
