Unwanted Page Jump when using hash URLs

Question

I've checked out the other page jump questions here on SO and I haven't found anything that matches, so here we go...

I'm working on building a website that uses CSS3 transitions and a bunch of hash-links as opposed to using jQuery to load/transition different pages/elements (just for fun/to prove that I/CSS can). The problem I'm having is that when I click on one of my links, the scrollbar automagically jumps down about 100px for no apparent reason.

I don't recall it doing this the entire time, so maybe something in my CSS went weird. I also added some <a name> tags at the top to try to pull it back up, but that's not working either. I also tried putting onclick="window.scrollTo(0,0);" in the links as well and that doesn't work either :(

Any ideas/help would be awesome, as it's really annoying/poor usability to have to scroll every time you navigate to the page. You can view the page here.

System Info:

Browser(s): Chrome 16.0.912.75, FireFox 9.0.1, Opera 11.6

OS: Windows 7

Answer 1

I'm not familiar with CSS3 transitions, so I don't fully understand what you're doing. However:

1. I assume this behavior that you find undesirable has something to do with the browser's native behavior of scrolling an element into view based on the fragment identifier in the URL. I'm not sure if overriding that with <a name> elements would work, but in any case you've incorrectly set the name values by prefixing them with a hash. E.g should be <a name="about"></a> not <a name="#about"></a>.

2. At least for debugging purposes, I'd try adding a click event listener and calling preventDefault() in it to see if it stops the scrolling.

3. It would be helpful to state what browser (including OS and version) you're experiencing the issue in.

Answer 2

Notice that it is not just jumping down to a random place, it is jumping down to the element that has the ID of the hash. (Try adding #footer to the end of your url) I do not think you can get around that without using preventDefault in JavaScript.