如何在不触发页面重载的情况下清空URL哈希？

我帮你排查了这个问题，核心在于用history.pushState(null, null, '')没法正确清空URL哈希——浏览器会把空字符串当成当前路径的相对引用，所以不会移除已有的哈希。另外你的点击事件里也没同步更新URL，导致点击home链接时URL哈希没变化，滚动回顶部时也无法正确重置。

具体修改方案 #

1. 添加URL处理工具函数：专门处理空哈希的情况，生成不带哈希的目标URL
2. 替换pushState的参数：用工具函数返回的正确URL替代空字符串
3. 同步点击事件的URL状态：点击导航后更新URL，保持滚动与URL一致

修改后的完整JavaScript代码 #

const FOCUS_HEIGHT = 160; 
let click = false;

// 新增：处理目标URL，正确清空哈希
function getTargetUrl(hash) {
  if (!hash) {
    // 返回当前路径+查询参数，不带哈希
    return window.location.pathname + window.location.search;
  }
  return hash;
}

function spyOnScroll() {
  // 新增：初始时清理可能存在的空哈希（比如example.com/#）
  if (window.location.hash === '' && window.location.href.includes('#')) {
    window.history.replaceState(null, null, getTargetUrl(''));
  }

  $('.menu-item').on('click', function(e) {
    e.preventDefault(); // 阻止默认跳转行为
    click = true;
    var hash = $(e.target).attr('href');
    console.log("clicked hash", hash);
    
    $('html').animate (
      { 
        scrollTop: $('.anchor' + hash).position().top, 
        progress: function(){click = true; console.log("click: " + click)} 
      }, 
      300, 
      function() { 
        click = false; 
        console.log("finished. click: " + click); 
        $('.menu-item[href="' + hash + '"]').addClass('active'); 
        $('.menu-item[href!="' + hash + '"]').removeClass('active'); 
        // 新增：点击完成后同步更新URL
        window.history.pushState(null, null, getTargetUrl(hash));
      } 
    ); 
  }); 

  let nav_links = $('.menu-item'); 
  console.log("nav links: ", nav_links, typeof nav_links); 
  let hashes = Array.from(nav_links).map(link => link.hash); 
  hashes = ['', ...hashes]; 
  console.log("hashes", hashes); 

  let anchors = hashes.map((hash) => { 
    return { 
      'hash': hash, 
      'position': $('.anchor'+hash).position().top 
    } 
  }); 
  anchors = [...anchors, {'hash':'none', 'position': Math.pow(10,1000)}]; 
  anchors = anchors.sort((A, B) => A.position - B.position); 
  console.log("anchors", anchors); 
  console.log("anchors: ", JSON.stringify(anchors)); 

  let top_position = anchors[0].position; 
  console.log("top position=" + top_position); 

  let current_hash = window.location.hash; 
  if (current_hash == '') { 
    current_hash = hashes[0]; 
  } 
  let new_hash = current_hash; 
  let current_index = hashes.indexOf(current_hash); 
  let new_index = current_index; 
  console.log("current hash=" + current_hash, "current_index", current_index); 

  $(window).scroll(function(e) { 
    console.log("scrolling..."); 
    if (click) { 
      console.log("scrolled due to click...returning"); 
      return; 
    } 

    let window_position = $(window).scrollTop(); 
    current_hash = window.location.hash; 

    let deltas = anchors.map(a => a.position - window_position - FOCUS_HEIGHT); 
    console.log("deltas: " + JSON.stringify(deltas)); 

    new_index = anchors.map( a => a.position - window_position -FOCUS_HEIGHT > 0).indexOf(true); 
    console.log("current_index", current_index, "new_index", new_index); 
    console.log("hashes", hashes); 

    if (new_index != current_index) { 
      new_hash = hashes[new_index - 1]; 
      current_hash = new_hash; 
      current_index = new_index; 
      console.log("new hash=" + new_hash + " current hash=" + current_hash); 

      $('.menu-item[href="' + new_hash + '"]').addClass('active'); 
      $('.menu-item[href!="' + new_hash + '"]').removeClass('active'); 

      console.log("setting hash"); 
      // 修改：用工具函数生成正确的URL
      window.history.pushState(null, null, getTargetUrl(new_hash)); 
    } 
  }); 
} 

$(window).on('load', spyOnScroll);

关键修改说明 #

• getTargetUrl函数：当需要清空哈希时，返回当前页面的路径和查询参数（不带哈希），让pushState能正确移除URL中的哈希部分，而不是用浏览器无法正确解析的空字符串。
• 点击事件同步URL：之前点击home链接后没有更新URL，导致URL哈希残留，现在添加pushState调用保持状态一致。
• 初始哈希清理：处理页面加载时可能存在的空哈希（比如example.com/#），确保初始状态正确。

这样修改后，滚动回顶部时URL会正确变回example.com（不带任何哈希），点击导航链接也会同步更新URL，同时不会触发页面重载。

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