滚动在Safari中使用的location.hash页面 [英] Scrolling a page using location.hash in Safari

问题描述

我有一个显示当前选定的消息下方的消息的树视图的论坛页面。当你点击树的消息，新邮件正文中装入了 DIV 附近使用AJAX然后将下面的code运行页面的顶部：

I have a forum page that displays a tree view of messages below the currently selected message. When you click on a message in the tree the new message body is loaded into a div near the top of the page using AJAX and then the following code is run:

window.location.hash = "page_top";

当然page_top是靠近该页面的顶部的锚定元件，所以新加载的邮件正文滚动到视图中。

Of course "page_top" is an anchor element near the top of the page, so the newly loaded message body scrolls into view.

这正常工作在所有的浏览器，除了Safari浏览器。在Safari浏览器（在PC和iPhone进行测试），它只能在第一次设置的的location.hash 。如果您重新设置的页面不会滚动。

This works fine on all the browsers, except Safari. On Safari (tested on PC and iPhone) it only works the first time you set location.hash. If you set it again the page does not scroll.

最终的结果是，新加载的邮件正文不会滚动到视图在Safari中，你必须每次从树中选择一个新的消息，时间向后滚动到页面顶部。

The end result is that the newly loaded message body does not scroll into view in Safari and you have to scroll back to the top of the page every time you pick a new message from the tree.

为什么Safari浏览器不喜欢这一点，是有什么我可以做些什么来解决这个问题？

Why does Safari not like this and is there anything I can do to fix it ?

编辑：

我猜这是关系到你可以通过谷歌搜索有关的location.hash和Safari浏览器找到的错误。看来野生动物园曾经有一个错误：如果你设置散列为相同的值的两倍，将导致它重新加载页面。我猜，当他们固定的，他们固定它有点太彻底了错误并停止它做任何事情，当你重新设置散列值相同。

I'm guessing this is related to a bug that you can find by Googling about location.hash and Safari. It seems Safari used to have a bug where if you set the hash to the same value twice it would cause it to reload the page. I'm guessing when they fixed that bug they fixed it a little too thoroughly and stopped it doing anything when you set hash to the same value again.

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

推荐答案

回答我的问题。浓汤是在正确的轨道上，但也不能令人信服。

Answering my own question. Gumbo was on the right track, but not quite there.

Safari不喜欢的location.hash被设置为空值。相反，你需要将其设置为一个真正的锚固值。

Safari doesn't like location.hash being set to a blank value. Instead you need to set it to a real anchor value.

于是沿着页面顶部我现在有：

So along at the top of the page I now have:

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

我发现我需要周围的锚的div另有野生动物园滚动到页面的未predictable的一部分，而不是锚。

I found that I needed the divs around the anchors otherwise Safari was scrolling to an unpredictable part of the page rather than to the anchors.

然后滚动到页面顶部我要做的：

Then to scroll to the top of the page I have to do:

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

通过在地方Safari会每次滚动到页面顶部。

With that in place Safari will scroll to top of the page every time.

这篇关于滚动在Safari中使用的location.hash页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！