在不滚动页面的情况下修改位置。哈希

javascript jquery fragment-identifier

2022-08-30 02:24:48

我们有一些页面使用ajax来加载内容，在某些情况下，我们需要深入链接到页面。与其链接到“用户”并告诉人们点击“设置”，不如将人们链接到用户.aspx#settings会有所帮助

允许人们向我们提供指向部分的正确链接（用于技术支持等）我已经将其设置为在单击按钮时自动修改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).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=$(this).attr("id")
            //return false;
    });
});

我本来希望这会阻止页面滚动 - 但这只会使链接根本不起作用。所以现在只是注释掉了，所以我可以导航。return false;

有什么想法吗？

答案 1

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

例

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

JSFiddle 上的演示

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

历史行为

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

history.scrollRestoration = 'manual';

浏览器支持

答案 2

步骤 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节点的位置触发滚动，因此您需要为他们提供一些帮助。您需要在视区顶部添加一个额外的内容，将其 ID 设置为哈希值，然后回滚所有内容：div

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