Named anchor from the address bar in Firefox

I have a page with a static bar 100px tall at the top with a menu linking to specific parts of the page:

HTML:

<ul class="menu">
    <li><a href="http://domain.com/#anchor1">ANCHOR 1</a></li>
    <li><a href="http://domain.com/#anchor2">ANCHOR 2</a></li>
    <li><a href="http://domain.com/#anchor3">ANCHOR 3</a></li>
</ul>

<a id="anchor1" class="anchor" name="anchor1"></a>
<h3>HEADER 1</h3>
<div>
Content 1
</div>
<a id="anchor2" class="anchor" name="anchor2"></a>
<h3>HEADER 2</h3>
<div>
Content 2
</div>
<a id="anchor3" class="anchor" name="anchor3"></a>
<h3>HEADER 3</h3>
<div>
Content 3
</div>

CSS:

.menu {
    position: fixed;
    width: 100%;
    height: 100px;
}

a.anchor {
    display: block;
    height: 100px;
    margin-top: -100px;
    visibility: hidden;
}

Using Chrome, if I, for example, type http://domain.com/#anchor2 in the address bar, the browser takes the anchor offset into account and scrolls to the desired point. If I do the same in Firefox, the browser seems to ignore the offset and scrolls to a wrong position. But, once I'm in the page, if I click the ANCHOR 2 menu item the browser scrolls to the right place. It seems that Firefox is ignoring the anchor offset when loading the page for the first time.

Any ideas on making this work in Firefox?

Thanks in advance

链接地址: http://www.djcxy.com/p/89010.html

上一篇: HTML定位符在页面加载时不起作用

下一篇: 在Firefox中的地址栏中命名为锚点