在Safari中使用location.hash滚动页面

时间:2009-02-14 14:01:13

标签: html ajax safari dhtml

我有一个论坛页面,显示当前所选邮件下方的邮件树状视图。当您单击树中的消息时,使用AJAX将新消息正文加载到页面顶部附近的 div 中,然后运行以下代码:

window.location.hash = "page_top";

当然“page_top”是靠近页面顶部的锚元素,因此新加载的邮件正文会滚动到视图中。

这适用于除Safari之外的所有浏览器。在Safari(在PC和iPhone上测试),它仅在您第一次设置 location.hash 时才有效。如果再次设置,则页面不会滚动。

最终结果是新加载的邮件正文不会滚动到Safari中的视图中,每次从树中选择新邮件时都必须滚动回页面顶部。

为什么Safari不喜欢这样,有什么办法可以修复它吗?

修改

我猜这与你可以通过Google搜索关于location.hash和Safari找到的错误有关。似乎Safari曾经有一个错误,如果你将哈希设置为相同的值两次,它将导致它重新加载页面。我猜他们什么时候修复了这个bug,他们把它修复得太彻底了,并且当你再次将哈希设置为相同的值时停止它做任何事情。

http://www.howtocreate.co.uk/safari/locationHashBug.html

4 个答案:

答案 0 :(得分:3)

您可以先重置它:

window.location.hash = "";
window.location.hash = "page_top";

答案 1 :(得分:2)

我需要添加:

<div><a name="page_top"></a></div>
<div><a name="page_topnot"></a></div>

使用“名称”代替“a href”。效果很好!

答案 2 :(得分:1)

回答我自己的问题。 Gumbo在正确的轨道上,但并不完全在那里。

Safari不喜欢将location.hash设置为空值。相反,您需要将其设置为真正的锚值。

所以我现在在页面的顶部:

<div><a href="page_top"></a></div>
<div><a href="page_topnot"></a></div>

我发现我需要围绕锚点的div,否则Safari会滚动到页面的不可预测部分而不是锚点。

然后滚动到我必须做的页面顶部:

window.location.hash = "page_topnot";
window.location.hash = "page_top";

有了这个,Safari每次都会滚动到页面顶部。

答案 3 :(得分:0)

我遇到了和你一样的问题并且这个解决方案有效 - 我唯一注意到的是,在IE浏览器中,我可以听到两次点击 - 所以我做了一个你的变种,只是放了一个锚,它也有效(即,调用两次,第一次,一个不存在的锚,第二次是真实的一个)

最重要的是,我的主播:

(tag a)name="top" id="top"(end of tag a)

在javascript中,两个调用:

window.location.hash ="topnot";

window.location.hash ="top";

感谢您的帮助!