如何在不跳文档的情况下更新window.location.hash？

Question

我在我的网站上设置了一个滑动面板。完成动画制作后，我像这样设置哈希function() {   window.location.hash = id;}（这是一个回调，并且已在id前面分配）。这很好用，允许用户在面板上添加书签，也可以使非JavaScript版本正常工作。但是，当我更新哈希时，浏览器跳到该位置。我想这是预期的行为。我的问题是：如何预防这种情况？即，如何更改窗口的哈希，但是如果哈希存在，浏览器是否无法滚动到该元素？某种event.preventDefault()事情？我正在使用jQuery 1.4和scrollTo插件。非常感谢！更新资料这是更改面板的代码。$('#something a').click(function(event) {    event.preventDefault();    var link = $(this);    var id = link[0].hash;    $('#slider').scrollTo(id, 800, {        onAfter: function() {            link.parents('li').siblings().removeClass('active');            link.parent().addClass('active');            window.location.hash = id;            }    });});

Answer 1

有一种解决方法，可以在现代浏览器上使用历史记录API，而在旧版本上使用后备：

if(history.pushState) {

    history.pushState(null, null, '#myhash');

}

else {

    location.hash = '#myhash';

}

Answer 2

问题是您将window.location.hash设置为元素的ID属性。无论是否“ preventDefault（）”，浏览器都会跳转到该元素，这是预期的行为。

解决该问题的一种方法是为哈希值加上一个任意值，如下所示：

window.location.hash = 'panel-' + id.replace('#', '');

然后，您要做的就是检查页面加载时是否带有前缀的哈希。另外，由于您现在可以控制哈希值，因此甚至可以平滑滚动到它。

$(function(){

    var h = window.location.hash.replace('panel-', '');

    if (h) {

        $('#slider').scrollTo(h, 800);

    }

});

如果您需要使其始终保持工作状态（而不仅仅是在初始页面加载时），则可以使用一个函数来监控对哈希值的更改，并即时跳转到正确的元素：

var foundHash;

setInterval(function() {

    var h = window.location.hash.replace('panel-', '');

    if (h && h !== foundHash) {

        $('#slider').scrollTo(h, 800);

        foundHash = h;

    }

}, 100);

Answer 3

便宜又讨厌的解决方案..使用丑陋的＃！样式。

要设置它：

window.location.hash = '#!' + id;

阅读：

id = window.location.hash.replace(/^#!/, '');

由于它与页面不匹配并锚定或标识，因此它不会跳转。