同一浏览器同一标签页修改URL哈希后仍跳转至前一个ID定位问题

问题根因 #

• HTML 类名定义错误，你给class属性加了#前缀，但 jQuery 选择器中.后的内容是直接匹配类名字符串，导致代码实际无法命中对应元素，和预期逻辑不符。
• 没有阻止浏览器默认的哈希锚点定位行为，浏览器自带的定位逻辑和你写的自定义滚动动画冲突，就会出现先跳到正确位置又被弹回的问题。
• 自定义定位逻辑只绑定了document.ready事件，仅在页面首次加载时触发，同一标签页修改哈希（页面不刷新）的场景下不会重新执行定位逻辑。
• 直接切割完整URL取哈希的方式兼容性差，遇到带路径的URL（比如abc.com/post/#firstid）就会取值错误，应该直接用浏览器提供的window.location.hash属性取哈希值。

修复方案 #

1. 先修正HTML的类名，去掉class属性里的#前缀：

<div class="firstid">
1
</div>
<div class="secondid">
2    
</div>

2. 替换原有的JS逻辑，增加哈希变化事件监听，同时取消浏览器默认锚点跳转，清理之前的滚动动画队列避免冲突：

// 封装公共定位方法
function scrollToHashTarget() {
  // 直接取哈希值，去掉开头的#号
  const targetHash = window.location.hash.slice(1);
  if (!targetHash) return;
  // 先停止之前的滚动动画，避免队列冲突
  jQuery('html, body').stop();
  const $target = jQuery(`.${targetHash}`);
  if ($target.length) {
    jQuery('html, body').animate({ 
      scrollTop: $target.offset().top - 100 
    }, 100);
  }
}

// 页面首次加载时执行
jQuery(document).ready(function() {
  // 先取消浏览器默认的锚点跳转，再执行自定义定位
  if (window.location.hash) {
    setTimeout(() => {
      window.scrollTo(0, 0);
      scrollToHashTarget();
    }, 0);
  }
});

// 监听哈希变化事件，同一标签页改哈希时也会触发定位
jQuery(window).on('hashchange', function() {
  scrollToHashTarget();
});

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