如何修改document.location.hash而不滚动页面?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (17)

我有几页使用ajax加载内容,我需要深入链接到一个页面。而不是链接到“用户”,并告诉用户点击“设置”,这有助于将人们链接到user.aspx#设置

为了让用户为我提供正确的链接(对于技术支持等),我设置了每当单击按钮时自动修改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;
    });
});

提问于
用户回答回答于

$(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

用户回答回答于

步骤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‘d节点最后出现的位置触发滚动。你需要多加一个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...

扫码关注云+社区