On my page somepage.html, I have the following markup:
<div class='someclass' id='hashtag1'>
<h1>somecontent</h1>
</div>
<div class='someclass' id='hashtag2'>
<h1>somecontent</h1>
</div>
<div class='someclass' id='hashtag3'>
<h1>somecontent</h1>
</div>
And on another page (someotherpage.html), there are links like this:
<a href='somepage.html#hashtag1'>first content div</a>
<a href='somepage.html#hashtag2'>second content div</a>
<a href='somepage.html#hashtag3'>third content div</a>
When clicking on these links, the expected behavior doesn't occur. The page loads normally but the window's scrollTop does not match the corresponding divs. I've tried changing IDs by removing hyphens and switching elements with no success.
If I manually edit the hashtag and press enter while already on the page, it works as intended without refreshing the page. However, this functionality does not work on the initial click.
Am I missing something obvious here?
EDIT:
- Using FF 9.0.1 on Mac OSX
- Turned JS off using web developer toolbar
- Changing or removing CSS has no effect
UPDATE: The issue is resolved when enabling JavaScript, which defeats the purpose since it should work without JavaScript for users without it enabled or supported. Strange behavior, Firefox.