在没有页面滚动的情况下修改location.hash

Question

在没有页面滚动的情况下修改location.hash

我们有一些页面使用ajax来加载内容，并且在某些情况下我们需要深入链接到页面。而不是链接到“用户”并告诉人们点击“设置”，能够将人们链接到user.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;会阻止页面滚动 - 但它只会使链接无法正常工作。所以现在只是注释掉，所以我可以导航。

有任何想法吗？

Answer 1

步骤1：您需要解除节点ID，直到设置了哈希。这是通过在设置哈希时从节点中删除ID，然后重新添加它来完成的。hash&nbsp;=&nbsp;hash.replace(&nbsp;/^#/,&nbsp;''&nbsp;);var&nbsp;node&nbsp;=&nbsp;$(&nbsp;'#'&nbsp;+&nbsp;hash&nbsp;);if&nbsp;(&nbsp;node.length&nbsp;)&nbsp;{ &nbsp;&nbsp;node.attr(&nbsp;'id',&nbsp;''&nbsp;);}document.location.hash&nbsp;=&nbsp;hash;if&nbsp;(&nbsp;node.length&nbsp;)&nbsp;{ &nbsp;&nbsp;node.attr(&nbsp;'id',&nbsp;hash&nbsp;);}第2步：某些浏览器会根据上次看到ID'd节点的位置触发滚动，因此您需要稍微帮助它们。您需要div在视口顶部添加一个额外的内容，将其ID设置为哈希值，然后将所有内容回滚：hash&nbsp;=&nbsp;hash.replace(&nbsp;/^#/,&nbsp;''&nbsp;);var&nbsp;fx,&nbsp;node&nbsp;=&nbsp;$(&nbsp;'#'&nbsp;+&nbsp;hash&nbsp;);if&nbsp;(&nbsp;node.length&nbsp;)&nbsp;{ &nbsp;&nbsp;node.attr(&nbsp;'id',&nbsp;''&nbsp;); &nbsp;&nbsp;fx&nbsp;=&nbsp;$(&nbsp;'<div></div>'&nbsp;) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.css({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;position:'absolute', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;visibility:'hidden', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;top:&nbsp;$(document).scrollTop()&nbsp;+&nbsp;'px' &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.attr(&nbsp;'id',&nbsp;hash&nbsp;) &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.appendTo(&nbsp;document.body&nbsp;);}document.location.hash&nbsp;=&nbsp;hash;if&nbsp;(&nbsp;node.length&nbsp;)&nbsp;{ &nbsp;&nbsp;fx.remove(); &nbsp;&nbsp;node.attr(&nbsp;'id',&nbsp;hash&nbsp;);}第3步：将其包装在插件中并使用它而不是写入location.hash...

Answer 2

我想我可能找到了一个相当简单的解决方案。问题是URL中的哈希值也是您滚动到的页面上的元素。如果我只是将一些文本添加到哈希，现在它不再引用现有元素！$(function(){ &nbsp;&nbsp;&nbsp;&nbsp;//This&nbsp;emulates&nbsp;a&nbsp;click&nbsp;on&nbsp;the&nbsp;correct&nbsp;button&nbsp;on&nbsp;page&nbsp;load &nbsp;&nbsp;&nbsp;&nbsp;if(document.location.hash){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#buttons&nbsp;li&nbsp;a").removeClass('selected'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;s=$(document.location.hash.replace("btn_","")).addClass('selected').attr("href").replace("javascript:",""); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;eval(s); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;//Click&nbsp;a&nbsp;button&nbsp;to&nbsp;change&nbsp;the&nbsp;hash &nbsp;&nbsp;&nbsp;&nbsp;$("#buttons&nbsp;li&nbsp;a").click(function(){ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$("#buttons&nbsp;li&nbsp;a").removeClass('selected'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).addClass('selected'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.location.hash="btn_"+$(this).attr("id") &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//return&nbsp;false; &nbsp;&nbsp;&nbsp;&nbsp;});});现在，URL显示为page.aspx#btn_elementID不是页面上的真实ID。我只是删除“btn_”并获取实际的元素ID

Answer 3

使用history.replaceState或history.pushState*更改哈希值。这不会触发跳转到相关元素。例$(document).on('click',&nbsp;'a[href^=#]',&nbsp;function(event)&nbsp;{ &nbsp;&nbsp;event.preventDefault(); &nbsp;&nbsp;history.pushState({},&nbsp;'',&nbsp;this.href);});演示JSFiddle*如果您想要历史向前和向后支持历史行为如果您正在使用history.pushState并且当用户使用浏览器的历史记录按钮（向前/向后）时您不想要页面滚动，请查看实验scrollRestoration设置（仅限Chrome 46+）。history.scrollRestoration&nbsp;=&nbsp;'manual';规范信息浏览器支持replaceStatepushState的填充工具