通过 JavaScript 拦截默认跳转行为，改用 scrollIntoView() 实现平滑滚动，可完全避免 URL 出现 #section-name，保持地址栏简洁干净。
通过 javascript 拦截默认跳转行为，改用 `scrollintoview()` 实现平滑滚动，可完全避免 url 出现 `#section-name`，保持地址栏简洁干净。
在单页应用或长文档页面中，使用 <a href="#section-id"></a> 进行锚点跳转虽简单，但会在浏览器地址栏中留下 #section-id，影响 URL 美观性与语义清晰度（例如不利于分享、SEO 或路由一致性）。幸运的是，我们无需依赖哈希路由库，仅用原生 JavaScript 即可优雅解决。
核心思路是：阻止 <a></a> 标签的默认跳转行为（event.preventDefault()），提取目标元素 ID，再调用 element.scrollIntoView() 手动滚动。这样既保留了语义化链接结构，又彻底规避了 URL 哈希变更。
以下为完整可运行示例：
<meta charset="UTF-8"><title>无哈希跳转示例</title><style>
section { min-height: 100vh; padding: 2rem; }
.scroll-link { display: inline-block; margin: 0.5rem; padding: 0.5rem 1rem; background: #007bff; color: white; text-decoration: none; border-radius: 4px; }
</style><nav><a href="#intro" class="scroll-link">首页介绍</a>
<a href="#features" class="scroll-link">功能特性</a>
<a href="#contact" class="scroll-link">联系我们</a>
</nav><section id="intro"><h1>欢迎来到本站</h1>
<p>这是首屏内容，无哈希污染 URL。</p>
</section><section id="features"><h2>核心功能</h2>
<p>支持平滑滚动、无障碍聚焦、兼容历史记录（如需）。</p>
</section><section id="contact"><h2>联系我</h2>
<p>邮箱：hello@example.com</p>
</section><script>
document.querySelectorAll('.scroll-link').forEach(link => {
link.addEventListener('click', function(e) {
e.preventDefault();
const targetId = this.getAttribute('href');
const targetEl = document.querySelector(targetId);
if (targetEl) {
// 可选：添加平滑滚动效果
targetEl.scrollIntoView({ behavior: 'smooth' });
// 可选：聚焦目标元素以提升可访问性
targetEl.tabIndex = -1;
targetEl.focus();
}
});
});
</script>
✅ 关键优势：
- URL 地址栏全程保持纯净（如
https://example.com/），无#干扰； - 支持
behavior: 'smooth'实现原生平滑滚动； - 通过
tabIndex和focus()保障键盘用户与屏幕阅读器的可访问性； - 不依赖第三方库，轻量、兼容性好（支持所有现代浏览器及 IE11+）。
⚠️ 注意事项：
- 此方案会禁用浏览器原生的“前进/后退”对锚点的历史记录能力。如需保留历史状态（例如用户点击后退应返回上一滚动位置），可配合
history.pushState()手动管理，但需权衡复杂度与需求； - 确保目标元素存在且 ID 唯一，否则
querySelector将返回null，建议添加存在性校验（如示例中所示）； - 若页面含服务端渲染（SSR）或需初始加载时定位到某区块，请额外处理
window.location.hash的解析逻辑。
总结：隐藏 URL 中的 #section 并非“黑科技”，而是对默认行为的合理接管。只要理解 preventDefault() 与 scrollIntoView() 的协作机制，即可在不牺牲体验的前提下，让 URL 更专业、更可控。
