在后退按钮上，为啥 Firefox 直接跳到我以前的滚动位置而不是动画

Posted 2023-05-07

【中文标题】在后退按钮上，为啥 Firefox 直接跳到我以前的滚动位置而不是动画

【英文标题】：On back button, why does Firefox jump straight to my previous scroll positions rather than animating在后退按钮上，为什么 Firefox 直接跳到我以前的滚动位置而不是动画

【发布时间】：2012-02-08 07:32:16

【问题描述】：

请访问演示：http://96.0.13.132

点击一下，现在点击返回按钮。在 webkit 浏览器中，您会动画回到之前的“状态”，而在 Firefox 中您会跳回。为什么是这样？如何让 Firefox 表现得更像 webkit？

我正在使用 jQuery、jQuery Address Plugin 和 jQuery ScrollTo Plugin。

【参考方案1】：

缺少intercepting the back button，然后应用您想要使用 jQuery 实现的效果，这很可能是 Firefox、Opera 的“设计”（在 Windows XP 上的 v11.60 中测试）并且..无法测试它在 Internet Explorer 8 中，因为

'console' is undefined in erny.js, Line: 1142

这使浏览器进入白屏。它几乎加载了页面，然后立即完全破坏了该站点。您可以通过使用封装任何 console 命令来解决此问题

if (console)  /** your command **/ 

这是一个很好的做法，因为您应该对没有控制台或 FireBug 的浏览器友好™...但是您也有一个非常突兀的 alert 告诉来访者

为获得最佳观看体验，请使用 Firefox、Chrome 或 Safari

所以我要说的是，在返回主要是视觉问题之前，您应该首先更多地关注网站可用性的这些方面。除非您 100% 确定只有 Safari 用户会访问您的网站，否则您真的不应该在访问者第一次访问您的网站时向他们展示弹出窗口或错误，从而让他们感到不受欢迎。

【讨论】：

感谢您的 cmets。该网站正在开发中。控制台日志将在公开之前被删除。

@curiouser -- 啊，我明白了。抱歉，如果我的回答显得粗鲁，我真的只是想确保您了解您迄今为止所做的选择可能对访问者产生的严重性和影响，特别是如果他们不是开发人员/IT人。拦截后退按钮可能是非 Safari 浏览器所需的解决方案。

【参考方案2】：

我认为问题在于我滚动到具有与哈希匹配的 id 的页面，并且默认跳转到 id 行为覆盖了绑定到后退按钮的动画。

例如，我的链接将指向“#about”，并且我有一个 id 为“about”的元素，因此 Firefox 直接滚动到它，然后我才能对它进行动画滚动。将元素的 id 更改为“page_about”似乎可以解决问题。

您可以在这里查看生产站点：http://www.erny.com