技术咨询：如何隐藏页面锚点跳转后URL中的#section_name？

下面提供两种可行的实现方案，均基于JavaScript完成：

方案一：阻止默认跳转，手动控制滚动 #

直接拦截导航链接的默认锚点跳转行为，手动实现滚动到目标区块，从根源避免URL出现锚点内容。

// 获取所有指向页面内区块的导航链接
const navLinks = document.querySelectorAll('nav a[href^="#"]');

navLinks.forEach(link => {
  link.addEventListener('click', function(e) {
    // 阻止浏览器默认的锚点跳转行为
    e.preventDefault();
    // 提取目标元素的ID（去掉开头的#）
    const targetId = this.getAttribute('href').slice(1);
    const targetElement = document.getElementById(targetId);
    
    if (targetElement) {
      // 平滑滚动到目标元素，可根据需求调整behavior参数
      targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' });
    }
  });
});

方案二：跳转后移除URL中的锚点 #

如果需要保留默认的锚点跳转逻辑，仅在事后清理URL中的锚点内容，可以通过修改浏览器历史记录实现：

// 监听锚点变化事件
window.addEventListener('hashchange', function() {
  // 替换当前历史记录，移除URL中的锚点部分
  history.replaceState(null, null, window.location.pathname + window.location.search);
});

也可以在点击链接时，延迟执行历史记录修改，确保滚动完成后再清理URL：

const navLinks = document.querySelectorAll('nav a[href^="#"]');

navLinks.forEach(link => {
  link.addEventListener('click', function() {
    // 短暂延迟，确保滚动行为已触发
    setTimeout(() => {
      history.replaceState(null, null, window.location.pathname + window.location.search);
    }, 10);
  });
});

注意事项 #

• 方案一的体验更流畅，完全不会出现锚点URL；方案二可能会有极短时间的锚点显示，适合无法完全拦截默认行为的场景。
• 使用history.replaceState不会新增历史记录，用户点击后退会直接回到上一个页面；如果需要保留锚点跳转的历史状态，可以改用history.pushState，但后退时会回到带锚点的URL，需根据实际需求选择。

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