如何移除页面URL中的哈希值并在刷新时重置窗口偏移量

我来帮你搞定这个困扰！你遇到的问题本质是浏览器在页面加载时会自动根据URL中的哈希值执行锚点定位，哪怕你之后清除了哈希，这个默认的定位动作已经完成了，所以直接尝试设置偏移量不会生效。另外你之前写的$(window).offset().top = 0是错误的用法——offset()是用来获取元素位置的方法，不能直接赋值修改滚动位置。

下面给你两种有效的解决方案，按需选择：

方案一：处理页面刷新后的残留哈希 #

如果想保留锚点跳转的默认行为，只解决刷新时的问题，可以在页面加载完成后，清除哈希并强制滚动到顶部：

$(window).on('load', function() {
  // 检查URL中是否存在哈希
  if (window.location.hash) {
    // 使用replaceState清除哈希，不会在浏览器历史中新增记录
    window.history.replaceState(null, null, window.location.pathname + window.location.search);
    // 滚动到页面顶部（同时作用于html和body兼容不同浏览器）
    $('html, body').scrollTop(0);
  }
});

这里用history.replaceState替代直接设置window.location.hash = ''，好处是不会触发页面的二次跳转，体验更流畅。

方案二：从根源避免哈希进入URL #

如果不想让锚点操作修改URL，可以拦截锚点的默认点击行为，手动实现滚动效果：

首先修正你的HTML结构（<a>直接包裹<li>不符合HTML规范，建议调整为如下结构）：

<nav class="desktopMenu">
  <ul>
    <li><a href="#home">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#abilities">Abilities</a></li>
    <li><a href="#gameplay">Gameplay</a></li>
  </ul>
</nav>

然后添加jQuery点击事件处理：

$('.desktopMenu a').on('click', function(e) {
  // 阻止默认的锚点跳转行为（不会修改URL哈希）
  e.preventDefault();
  // 获取目标锚点的选择器
  const targetSelector = $(this).attr('href');
  // 平滑滚动到目标位置（500是动画时长，单位毫秒，可按需调整）
  $('html, body').animate({
    scrollTop: $(targetSelector).offset().top
  }, 500);
});

这样用户点击导航时，页面会平滑滚动到目标区域，URL不会添加哈希值，自然刷新后也不会出现位置偏移的问题了。

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