一尘不染

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

javascript

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

有任何想法吗?


阅读 532

收藏
2020-04-25

共1个答案

一尘不染

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

2020-04-25