如何在不跳过文档的情况下更新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(/^#!/, '');

由于它与页面中的匹配和锚点或id不匹配,因此不会跳转.

Answer 4

为什么不获取当前滚动位置,将其放入变量然后分配哈希并将页面滚动回原位:

var yScroll=document.body.scrollTop;
window.location.hash = id;
document.body.scrollTop=yScroll;

这应该工作

Answer 5

我使用现代浏览器的Attila Fulop(Lea Verou)解决方案和旧浏览器的Gavin Brock解决方案的组合如下:

if (history.pushState) {
    // IE10, Firefox, Chrome, etc.
    window.history.pushState(null, null, '#' + id);
} else {
    // IE9, IE8, etc
    window.location.hash = '#!' + id;
}

正如Gavin Brock所观察到的,为了捕获id,你必须处理字符串(在这种情况下可以有或没有"!"),如下所示:

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

在此之前,我尝试了类似于user706270提出的解决方案,但它与Internet Explorer不兼容:因为它的Javascript引擎不是很快,你可以注意到滚动增加和减少,这会产生令人讨厌的视觉效果.