用于哈希锚点的jQuery动画导致后退按钮错误

Question

我正在创建一个具有固定标题的网页，当用户点击标题中的导航链接时，整个页面（html和正文）都有一个动画幻灯片，将该链接元素放在顶部，而不是只是跳到那里。我的问题是，如果我尝试单击后退按钮，它将是后面的一部分。例如，如果我在#A部分然后转到部分#B然后部分#C，然后点击部分#C上的后退按钮，它将不会返回到页面#B，直到我再次单击它为止。该网址反映了后退按钮被点击，但页面保持不变。因此，在两次点击“返回”之后，网址将会显示在#A上，但页面实际上仍然会显示在#B上。

这是我的jQuery代码，非常简单。如果有人可以帮我恢复按钮功能，我会很感激

$('.header-nav-item').click(scrollBody);

function scrollBody(e){
    e.preventDefault();

    var url_hash = "#" + e.target.href.substring(e.target.href.indexOf('#')+1);

    $('html,body').animate({
        'scrollTop':   $(url_hash).offset().top
    }, 500,'swing',function(){
        //reroute url
        window.location = url_hash;
    });
}

编辑：此问题发生在Firefox和Chrome中。奇怪的是，IE处理后退按钮就好了

Answer 1

在Firefox和Chrome中，点击后退按钮可以在URI更改之前显示您在页面中的位置。在动画完成后，更改window.location的函数会运行，这意味着后退按钮会将您带到动画完成的位置。

在您的情况下，页面上的这两个位置完全相同，因此当您第一次单击后退按钮时，浏览器看起来没有做任何事情。

以列表格式说明：

1. 用户点击该链接。
2. 动画滚​​动到锚点，这将成为浏览器历史记录中的前一个位置......
3. ...您可以通过将浏览器的URL更改为锚点来创建新的历史记录项。

这是一种hacky解决方案（我现在无法想到其他任何事情）：

$('.header-nav-item').click(scrollBody);

function scrollBody(e){
    e.preventDefault();

    var url_hash = "#" + e.target.href.substring(e.target.href.indexOf('#')+1);

    // Browse to the anchor before changing anything (doing the animation) so the back 
    // button gets us to the position the user was viewing before s/he clicked on the 
    // navigation link. We save the original position ($(document).scrollTop()) -- i.e., 
    // where the user was originally -- so we can go back to it to do the animation.
    var orig = $(document).scrollTop();
    window.location.hash = url_hash;
    window.scrollTo(orig);

    $('html,body').animate(
        { 'scrollTop':   $(url_hash).offset().top },
        500,
        'swing'
    );
}