浏览器"后退"按钮与jQuery动画页面

Question

浏览器"后退"按钮与jQuery动画页面

Dim*_*zov 12 browser jquery animation back

我有一个具有挑战性的问题,我一直在争夺一段时间.

问题:当我使用浏览器的后退按钮返回上一页时,在播放完所有动画后,页面将以最终状态显示.我希望它以初始状态显示并重放动画.

我的网站使用了一些基本的jQuery动画.每个页面的初始状态都隐藏在浏览器窗口下边缘下方的主要内容中.当窗口加载时,主要内容会动画显示在浏览器中.当访问者单击任何菜单链接时,主内容会再次卷起并消失在浏览器窗口的上边缘之上 - 然后加载新页面.使用这两段代码完成整个过程:

//Animate the content up from below the browser window

$('#maincontent').animate({top: "15%"}, 2000);

Run Code Online (Sandbox Code Playgroud)

和

//Animate the content up to hide above the browser window

$('#menu a').click(function(event) {
    event.preventDefault();
    var href = this.href;
    $('#maincontent').animate({
        top: '-300%'
    }, 500,
    function() {
        window.location = href;
    });
});

Run Code Online (Sandbox Code Playgroud)

问题:当单击浏览器后退按钮时,如何使页面显示为初始状态？

我浏览了StackOverflow一段时间了.人们对这个问题进行了很多讨论,但似乎没有人能找到真正有效的解决方案.建议包括阻止页面被缓存 - (不起作用,即使它起作用,也不会很有效率,因为某些页面确实需要缓存) - 重新加载页面(导致一些特殊的行为,最终没有'工作,或者) - 使用cookie(没有给出任何代码的具体示例)或使用PHP(没有任何具体的代码示例在任何地方给出).我在这个网站上询问了几个问题,并收到了一些建议,但没有一个在我的情况下有效.所以经过几个不眠之夜,我想问一下是否有人可以真正帮助解决这个问题.

如果有人在成功之前处理了这个问题,如果您能分享您的专业知识并建议可行的解决方案,我将不胜感激!

新编辑:我想我可能已经找到了解决方案,但我希望有人帮助使用jQuery/JavaScript语法.我想尝试修改代码以向其添加一个操作,但我不确定如何编写它,以便页面在位置更改为新页面之前重新加载所以而不是显示的第二个代码段上面,我想写这样的东西:

//Animate the content up to hide above the browser window

$('#menu a').click(function(event) {
    event.preventDefault();
    var href = this.href;
    $('#maincontent').animate({
        top: '-300%'
    }, 500,
    function() {
    // a code that reloads the same page, something like
    //window.location = window.location; followed by
        window.location = href;
    });
});

Run Code Online (Sandbox Code Playgroud)

- 但我只是不知道如何正确地写它.

或者,也许可以将页面的css值重置为css文件中的默认值并再次触发JavaScript？

有人可以建议正确的代码吗？