无需 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> </section><section id="contact"><h2>联系我们</h2> <p>邮箱：hello@example.com</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill10246" title="HTML Text Extract"><img src="https://img.php.cn/upload/skill/001/246/273/6adaf20dee630206.jpg" alt="HTML Text Extract" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill10246" title="HTML Text Extract" class="overflowclass">HTML Text Extract</a> <p class="overflowclass">从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。</p> </div> <a rel="nofollow" href="/xiazai/skill10246" title="HTML Text Extract" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> </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。
掌握这一技巧，你就能在几行代码内完成专业级页面内导航体验。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
