【发布时间】：2011-06-02 14:32:08
【问题描述】：
我有一个具有挑战性的问题，我已经解决了一段时间了。
问题：当我使用浏览器的后退按钮返回上一页时，页面在播放完所有动画后显示为最终状态。我希望它以初始状态显示并重播动画。
我的网站使用了一些基本的 jQuery 动画。每个页面的初始状态都将主要内容隐藏在浏览器窗口的下边缘下方，当窗口加载时，主要内容会以动画形式出现在浏览器中。当访问者单击任何菜单链接时，主要内容会再次卷起并消失在浏览器窗口的上边缘上方 - 然后加载新页面。整个事情是通过这两段代码实现的：
//Animate the content up from below the browser window
$('#maincontent').animate({top: "15%"}, 2000);
和
//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;
});
});
问题：点击浏览器后退按钮时，如何让页面显示在初始状态？
我浏览了 StackOverflow 一段时间。人们经常询问这个问题，但似乎没有人找到真正有效的解决方案。建议包括阻止页面被缓存——（不起作用，即使它起作用，也不会很有效率，因为某些页面确实需要被缓存）——重新加载页面（导致一些特殊的行为，最终不会'也行不通） - 使用 cookie（在任何地方都没有给出具体的代码示例）或使用 php（在任何地方都没有给出具体的代码示例）。我在这个网站上问了几个关于 in 的问题，并收到了一些建议，但没有一个适合我的情况。所以在几个不眠之夜之后，我想问问是否有人真的可以帮助解决这个问题。
如果有人之前成功处理过该问题，如果您能分享您的专业知识并提出可行的解决方案，我将不胜感激！
新编辑：我想我可能已经找到了解决方案，但我需要 jQuery/JavaScript 语法方面的帮助。我想尝试修改代码以添加更多操作，但我不确定如何编写，以便页面在位置更改为新页面之前重新加载所以我想写这样的东西，而不是上面显示的第二个 sn-p：
//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;
});
});
-- 但我就是不知道如何正确写。
或者，也许可以将页面的 css 值重置为 css 文件中的默认值并再次触发 JavaScript？
有人可以建议正确的代码吗？
【问题讨论】：
-
window.onload 怎么样？
-
是的，怎么样？
标签： jquery browser animation back