0

我有一段相当令人沮丧的时间，试图在提交表单后强制我的页面滚动回顶部。

我正在试用的代码很简单：

$('body').prepend('<a href="#" id="testing">Click here</a>');
$('body').on("click", "#testing", function() {
    window.top.$('body, html').animate({ scrollTop: 0 }, 0);
});

正如预期的那样，这适用于 FireFox，但不适用于 Internet Explorer。

值得注意的是，我使用的是 UWA 小部件格式，并且我的代码基本上嵌入在两个 iframe中。有一个用于 HTML 模板的 iframe 和包含此小部件的 iframe。我无法控制这些框架，也不能给你完整的代码，因为它实际上是数千行可怕的编写、错位的 HTML 和 JavaScript。

以下是我汇总的一些事实，看看是否有人能发现问题，因为我真的不知道从哪里开始寻找：

  • 在 FireFox 中，此代码运行良好 - 单击链接会立即将整个页面滚动到顶部
  • 如果我打开 IE 控制台，页面默认标准是“Quirks Mode”。将此更改为“IE9 标准”可以解决问题，即单击链接会将整个页面滚动回顶部
  • 更改window.top为window.parent在两个浏览器中均无效
  • 更改window.top为window.parent.parent也适用于 FF 但不适用于 IE
  • 更改animate({ scrollTop: 0 }, 0);为scrollTop(0)在 FF 中有效，但在 IE 中无效

如果我在 IE 中运行以下警报，奇怪的是（对我来说），这是输出：

alert(typeof window.parent); // object
alert(typeof window.top); // object
alert(typeof window.parent.parent); // object
alert(typeof window.parent.$('html')); // object
alert(typeof window.parent.$('body')); // object
alert(window.parent.offset().top); // alert doesn't trigger, no further alerts run until this line is commented
alert(window.parent.parent.offset().top); // alert doesn't trigger, no further alerts run until this line is commented
alert(window.parent.$('html').offset().top); // 0
alert(window.parent.$('body').offset().top); // 0
alert(window.top.$('html').offset().top); // 0
alert(window.top.$('body').offset().top); // 0

简而言之，它看起来window.top是可访问的$('html')，那里的元素也是如此......那么为什么我不能让我的页面滚动，除非我在我的浏览器中强制标准模式？

4

0 回答 0