jquery – window.location.hash – 停止在chrome中重新加载

2023年3月31日 285次阅读

我有以下问题：

$('.gotoservices').click(function(){
    $('html,body').scrollTo($("#services"),1000);
    window.location.hash = "services";
    return false;
});

此代码有效,但由于某种原因,页面在scrollTo之前闪烁.

如果我删除window.location.hash行返回false;工作,页面不闪烁/闪烁.

我试过e.preventDefault – 不起作用

我很难找到任何解决方法.

干杯

最佳答案 在一般意义上,您可以使用HTML5历史记录更新URL,而无需浏览器重新呈现任何内容：

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

当然,您可能希望为旧浏览器提供后备,并且您可能希望仅在完成动画后才能执行此操作.

因此,与您的代码集成：

$('.gotoservices').click(function(e){
    //Prevent default so the browser doesn't try to do anything
    e.preventDefault();
    var $hash = "#services";
    $('html,body').scrollTo($($hash), 1000, function () {
        //If the browser supports HTML5 history,
        //use that to update the hash in the URL
        if (history.pushState) {
            history.pushState(null, null, $hash);
        }
        //Else use the old-fashioned method to do the same thing,
        //albeit with a flicker of content
        else {
            location.hash = $hash;
        }
    });
});
点赞