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

javascript jquery scrollto hash

2022-08-30 01:42:12

我在我的网站上设置了一个滑动面板。

当它完成动画制作时，我像这样设置哈希

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;

            }
    });
});

答案 1

通过在现代浏览器上使用历史记录 API 并在旧浏览器上使用回退，有一种解决方法：

if(history.pushState) {
    history.pushState(null, null, '#myhash');
}
else {
    location.hash = '#myhash';
}

功劳归于莉亚·维鲁

答案 2

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

解决此问题的一种方法是在哈希值前面加上任意值，如下所示：

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);