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

Question

我们有一些页面使用 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; 会阻止页面滚动 - 但它只是让链接根本不起作用。所以现在只是注释掉了，这样我就可以导航了。

有任何想法吗？

原文由 FiniteLooper 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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

原文由 FiniteLooper 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

使用 history.replaceState 或 history.pushState \* 更改哈希值。这不会触发跳转到相关元素。

例子

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

JSFiddle 上的演示

\* 如果你想要历史向前和向后支持

历史行为

如果您正在使用 history.pushState 并且当用户使用浏览器的历史按钮（向前/向后）时您不希望页面滚动，请查看实验性 scrollRestoration 设置 （Chrome 46+仅） 。

 history.scrollRestoration = 'manual';

• 规格
• 信息

浏览器支持

• 替换状态
• 推送状态
• polyfill

原文由 HaNdTriX 发布，翻译遵循 CC BY-SA 3.0 许可协议