javascript - 在不滚动页面的情况下修改 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; 会阻止页面滚动 - 但它只会使链接根本不起作用。所以现在只是注释掉了，所以我可以导航。

有什么想法吗？

Answer 1

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

示例

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

Demo on JSFiddle

_{^{* 如果你想要历史向前和向后支持}}

历史行为

如果您正在使用 history.pushState 并且您不想在用户使用浏览器的历史按钮(前进/后退)时滚动页面，请查看实验性 scrollRestoration 设置 (仅限 Chrome 46+).

history.scrollRestoration = 'manual';

• spec
• info

浏览器支持

• replaceState
• pushState
• polyfill