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

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


完成动画制作后,我像这样设置哈希


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;


            }

    });

});


万千封印
浏览 547回答 3
3回答

胡说叔叔

有一种解决方法,可以在现代浏览器上使用历史记录API,而在旧版本上使用后备:if(history.pushState) {    history.pushState(null, null, '#myhash');}else {    location.hash = '#myhash';}

当年话下

问题是您将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);

慕妹3242003

便宜又讨厌的解决方案..使用丑陋的#!样式。要设置它:window.location.hash = '#!' + id;阅读:id = window.location.hash.replace(/^#!/, '');由于它与页面不匹配并锚定或标识,因此它不会跳转。
打开App,查看更多内容
随时随地看视频慕课网APP