通过 JavaScript 拦截锚点链接的默认行为，调用 scrollIntoView() 实现平滑滚动，并结合 history.replaceState() 或直接阻止 URL 变更，即可完全避免 #section 出现在地址栏中。
通过 javascript 拦截锚点链接的默认行为，调用 `scrollintoview()` 实现平滑滚动，并结合 `history.replacestate()` 或直接阻止 url 变更，即可完全避免 `#section` 出现在地址栏中。
在单页应用或长文档导航中，点击导航链接跳转到页面某一部分（如 <a href="#about">关于</a>）会自动在 URL 后追加 #about，影响美观与 SEO 一致性。虽然浏览器原生锚点行为无法直接“禁用”哈希更新，但可通过 JavaScript 完全接管滚动逻辑，实现视觉跳转与 URL 干净的双重目标。
核心思路是：阻止默认跳转行为 → 手动滚动到目标元素 → 保持 URL 不变（或可选地静默更新 history）。
以下是一个轻量、兼容性良好的实现方案：
<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"><h2>欢迎来到首页</h2>
<p>这是首屏内容...</p></section><section id="features"><h2>核心特性</h2>
<p>支持无缝滚动与干净 URL...</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(); // 阻止默认锚点跳转和 URL 改变
const targetId = this.getAttribute('href').substring(1); // 提取 id（去掉 #）
const targetEl = document.getElementById(targetId);
if (targetEl) {
targetEl.scrollIntoView({
behavior: 'smooth',
block: 'start'
});
}
});
});
</script>
✅ 关键要点说明：
-
e.preventDefault()是核心：它彻底阻止浏览器默认的哈希跳转，因此 URL 栏不会出现#xxx； -
scrollIntoView({ behavior: 'smooth' })提供原生平滑滚动体验，无需额外库； -
substring(1)安全提取 ID（比正则更简洁），适用于标准#id格式； - 该方案不修改 history（即不触发后退栈变化），若需保留「可后退」能力，可替换为
history.replaceState(null, '', window.location.pathname)—— 但通常隐藏哈希即意味着不希望用户通过地址栏哈希导航，故默认不启用。
⚠️ 注意事项：
- 此方法会使原生锚点语义失效，对依赖
:targetCSS 伪类或服务端渲染哈希定位的场景需额外适配； - 屏幕阅读器仍能正常识别链接目的（建议保留
aria-label或确保id语义清晰）； - 若需支持浏览器前进/后退按钮同步滚动，应配合
popstate事件监听与手动 scroll，但会显著增加复杂度——多数静态导航场景无需此功能。
综上，对于追求简洁 URL 与良好用户体验的现代网页，该 JavaScript 方案是轻量、可靠且广泛兼容的最佳实践。
