无需页面滚动即可修改location.hash

Z时代
2024-01-10
分类：问答

我们有一些页面使用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;可以阻止页面滚动-但这只会使链接根本不起作用。所以这只是暂时的注释，所以我可以导航。

有任何想法吗？

回答：

我想我可能已经找到了一个相当简单的解决方案。问题在于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;
    });
});