jquery - window.location.hash - 停止在 Chrome 中重新加载

Question

我有以下问题:

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

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

如果我删除 window.location.hash 行，则 return false; 有效，并且页面不会闪烁。

我已尝试e.preventDefault - 不起作用

我正在努力寻找解决办法。

干杯

Answer 1

一般来说，您可以使用 HTML5 history 更新 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;
        }
    });
});