第 1 步：您需要解除节点 ID，直到设置了哈希值。这是通过在设置散列时从节点上删除 ID，然后重新添加它来完成的。

hash = hash.replace( /^#/, '' );
var node = $( '#' + hash );
if ( node.length ) {
  node.attr( 'id', '' );
}
document.location.hash = hash;
if ( node.length ) {
  node.attr( 'id', hash );
}

第 2 步：有些浏览器会根据上次看到 ID 节点的位置触发滚动，因此您需要帮助他们一点。您需要div在视口顶部添加一个额外的内容，将其 ID 设置为哈希值，然后回滚所有内容：

hash = hash.replace( /^#/, '' );
var fx, node = $( '#' + hash );
if ( node.length ) {
  node.attr( 'id', '' );
  fx = $( '<div></div>' )
          .css({
              position:'absolute',
              visibility:'hidden',
              top: $(document).scrollTop() + 'px'
          })
          .attr( 'id', hash )
          .appendTo( document.body );
}
document.location.hash = hash;
if ( node.length ) {
  fx.remove();
  node.attr( 'id', hash );
}

第 3 步：将它包装在一个插件中并使用它而不是写入location.hash...

使用history.replaceState或history.pushState* 更改哈希。这不会触发跳转到关联元素。

例子

$(document).on('click', 'a[href^=#]', function(event) {
  event.preventDefault();
  history.pushState({}, '', this.href);
});

在 JSFiddle 上演示

_{^{* 如果你想要历史向前和向后支持}}

历史行为

如果您正在使用history.pushState并且您不希望在用户使用浏览器的历史按钮（向前/向后）时滚动页面，请查看实验scrollRestoration设置（仅限 Chrome 46+）。

history.scrollRestoration = 'manual';

• 规格
• 信息

浏览器支持

• 替换状态
• 推状态
• 填充物

我想我可能已经找到了一个相当简单的解决方案。问题是 URL 中的哈希也是您滚动到的页面上的一个元素。如果我只是在哈希前添加一些文本，现在它不再引用现有元素！

$(function(){
    //This emulates a click on the correct button on page load
    if(document.location.hash){
     $("#buttons li a").removeClass('selected');
     s=$(document.location.hash.replace("btn_","")).addClass('selected').attr("href").replace("javascript:","");
     eval(s);
    }

    //Click a button to change the hash
    $("#buttons li a").click(function(){
            $("#buttons li a").removeClass('selected');
            $(this).addClass('selected');
            document.location.hash="btn_"+$(this).attr("id")
            //return false;
    });
});

现在 URL 显示为page.aspx#btn_elementID这不是页面上的真实 ID。我只是删除“btn_”并获取实际元素 ID

我最近正在构建一个依赖于window.location.hash维护状态的轮播，并发现 Chrome 和 webkit 浏览器会在window.onhashchange触发事件时以尴尬的方式强制滚动（甚至到不可见的目标）。

甚至试图注册一个停止传播的处理程序：

$(window).on("hashchange", function(e) { 
  e.stopPropogation(); 
  e.preventDefault(); 
});

没有阻止默认浏览器行为。我找到的解决方案是window.history.pushState用来更改哈希而不触发不良副作用。

 $("#buttons li a").click(function(){
    var $self, id, oldUrl;

    $self = $(this);
    id = $self.attr('id');

    $self.siblings().removeClass('selected'); // Don't re-query the DOM!
    $self.addClass('selected');

    if (window.history.pushState) {
      oldUrl = window.location.toString(); 
      // Update the address bar 
      window.history.pushState({}, '', '#' + id);
      // Trigger a custom event which mimics hashchange
      $(window).trigger('my.hashchange', [window.location.toString(), oldUrl]);
    } else {
      // Fallback for the poors browsers which do not have pushState
      window.location.hash = id;
    }

    // prevents the default action of clicking on a link.
    return false;
});

然后，您可以侦听正常的 hashchange 事件和my.hashchange：

$(window).on('hashchange my.hashchange', function(e, newUrl, oldUrl){
  // @todo - do something awesome!
});

原始代码的片段：

$("#buttons li a").click(function(){
    $("#buttons li a").removeClass('selected');
    $(this).addClass('selected');
    document.location.hash=$(this).attr("id")
});

将此更改为：

$("#buttons li a").click(function(e){
    // need to pass in "e", which is the actual click event
    e.preventDefault();
    // the preventDefault() function ... prevents the default action.
    $("#buttons li a").removeClass('selected');
    $(this).addClass('selected');
    document.location.hash=$(this).attr("id")
});