Question

在网站www.example.org上我有一个锚#anchor。我必须使用锚点，因为该网站是用GWT编写的，它嵌入在iframe中（两个站点都有不同的域名）。

幸运的是，我找到了一个滚动到Chrome，Safari，IE7，IE8，IE9的锚点的解决方案，但事实证明它在Firefox中不起作用。

在我的代码中，我检查了浏览器是否是IE的一个。如果是，那么我这样做：

window.location = www.example.org#anchor

并且效果很好。

如果浏览器不是IE的其中一个，那么我这样做：

window.location.href = '#anchor';

这在Chrome和Safari中完美运行。

然而，这两种解决方案都不适用于Firefox（6）。有没有人知道如何在FireFox中滚动到锚点？

P.S。 scrollIntoView，scrollTo（0,0）并获取一个元素滚动到该元素在这种情况下不起作用...经过几天的尝试，我认为只有锚点工作。

Answer 1

我知道这已经过了一段时间，但我刚刚遇到了同样的问题，并且发现了一个糟糕但有效的解决方案。问题：Firefox在某些iframe中没有响应location.hash。上面在jsfiddle中发布的简单示例确实有效，但更复杂的例子（在我自己的情况下在Facebook应用程序中）却没有。解决方案：在您想要锚点的位置创建一个视觉上隐藏的INPUT元素。

<input id="top_anchor" type="text" style="position:relative; z-index:-1; float:left">

CSS旨在欺骗浏览器认为输入是可见的，但实际上使该元素对用户不可见，根据您自己的情况进行修改。 z-index将它呈现在其父元素下面（您可能需要弄乱父元素以使其完全起作用）并且应用于它的float将有助于输入在其父元素中折叠。重要的是我们不要使用“display：none”或“visibility：hidden”，因为浏览器会认为该元素在视觉上是隐藏的，而下一部分将不起作用。

下一部分：在你的javascript中，我们发现一种更加狡猾的方式让浏览器跳转到页面中的某个点，而不是更改哈希值或位置：

document.getElementById('top_anchor').focus();

我刚在Firefox 8中对此进行了测试，效果很好。令人遗憾的是，这种不诚实的黑客行为会起作用，但原始的，善意的代码却不会;但我完全理解某些行为需要由用户行为触发的思维过程。

Answer 2

试试这个：

setTimeout(window.location.hash = "anchor",500)

Answer 3

使用：

window.location.hash = "anchor"

这应该可以在每个浏览器中完成。这里有一个live example，可以在Firefox中使用。此外，当设置散列时，a-anchor必须是可见的，否则FF7将不会跳转到锚点。这里的an example在FF7中不起作用的东西确实证明了你不允许做的事情。

Answer 4

您向下滚动的元素是否具有ID属性并且ID仅使用一次？

Answer 5

非常感谢指出window.location.hash而不是 window.location.href。

使用window.location.hash我可以使用锚点重新加载页面！

<a href="javascript:window.location.hash = '#anchor';
window.location.reload(true);">Link text...</a>

iframe中的window.location.href在FireFox中不起作用

5 个答案: