0

我正在制作一个具有固定标题的网页，当用户单击标题中的导航链接时，整个页面（html 和正文）都有一个动画幻灯片将该链接元素放在顶部，而不仅仅是跳到那里. 我的问题是，如果我尝试单击后退按钮，它将落后一节。例如，如果我在#A 部分，然后转到#B 部分，然后转到#C 部分，然后点击#C 部分的返回按钮，它不会回到#B 页，直到我再次单击它。url 反映了被点击的后退按钮，但页面保持不变。因此，在点击“返回”两次后，该 url 将位于 #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 处理后退按钮很好

4

1 回答 1

2

在 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'
    );
}
于 2013-06-14T02:07:19.710 回答