如何使用JavaScript隐藏URL栏中的哈希ID

核心需求 #

实现从外部页面跳转至主页指定div时，自动平滑滚动到目标元素，同时不显示URL末尾的哈希或参数，单页内的无哈希滚动逻辑保持正常。

方案一：用URL查询参数替代哈希（推荐） #

这种方式避免URL一开始就出现哈希，加载后直接清理参数，体验更干净。

1. 外部页面的跳转链接

将原哈希链接改为带查询参数的形式：

<a href="https://website.com?target=div-2">跳转到div-2</a>

2. 主页的处理代码

页面加载时读取参数、完成滚动，再修改URL移除参数：

// 页面加载完成后执行
window.addEventListener('load', () => {
  const params = new URLSearchParams(window.location.search);
  const targetId = params.get('target');
  
  if (targetId) {
    const targetElement = document.getElementById(targetId);
    if (targetElement) {
      // 平滑滚动到目标元素
      targetElement.scrollIntoView({ behavior: 'smooth' });
    }
    // 替换当前历史记录，移除查询参数，不留下痕迹
    window.history.replaceState({}, document.title, window.location.pathname);
  }
});

3. 单页内的滚动处理（保持无哈希）

修改单页内的链接，用自定义属性触发滚动，避免默认哈希行为：

<a href="#" data-target="btn-1">BTN 1</a><br>
<a href="#" data-target="btn-2">BTN 2</a><br>
<a href="#" data-target="btn-3">BTN 3</a>

<div id="btn-1" style="background-color: red; width:100%; height:600px;"></div>
<div id="btn-2" style="background-color: green; width:100%; height:600px;"></div>
<div id="btn-3" style="background-color: blue; width:100%; height:600px;"></div>

对应的JS逻辑：

// 绑定单页内滚动事件
document.querySelectorAll('a[data-target]').forEach(link => {
  link.addEventListener('click', (e) => {
    e.preventDefault(); // 阻止默认跳转
    const targetId = link.getAttribute('data-target');
    const targetElement = document.getElementById(targetId);
    if (targetElement) {
      targetElement.scrollIntoView({ behavior: 'smooth' });
    }
  });
});

4. 基础CSS（保持平滑滚动）

html {
  scroll-behavior: smooth;
}

方案二：兼容现有哈希链接（无需修改外部链接） #

如果已经有大量外部链接使用#div-2的形式，可以在主页加载后处理哈希，完成滚动后移除：

window.addEventListener('load', () => {
  const hash = window.location.hash.slice(1); // 去掉开头的#
  if (hash) {
    const targetElement = document.getElementById(hash);
    if (targetElement) {
      targetElement.scrollIntoView({ behavior: 'smooth' });
    }
    // 移除哈希，更新URL
    window.history.replaceState({}, document.title, window.location.pathname);
  }
});

这种方式可以兼容原有链接，用户打开链接时会短暂看到哈希，但页面加载完成后会自动消失。

内容的提问来源于stack exchange，提问作者Anuj Thapa