1

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

Brad Orego
  • 2,976
  • 3
  • 18
  • 24
  • I've noticed it doesn't happen on the `#websites` page, so maybe I'll look into that a little and see what's different about it... – Brad Orego Jan 20 '12 at 18:08

2 Answers2

2

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.

JMM
  • 26,019
  • 3
  • 50
  • 55
  • Added browser/OS info. Thanks for the tip on the `name` thing, but unfortunately neither that nor the `preventDefault` worked (`preventDefault()` stops a link from navigating at all, which is bad - I still want the stuff to load, I just don't want the stupid page to jump down like it is). – Brad Orego Jan 20 '12 at 18:52
  • Yeah, but these are just links to sections of the same document, and you're implementing a different interface than scrolling to display them. So unless `preventDefault()` would break what you're doing with CSS, I don't see what the problem would be. Re: your other comment, yeah, I was thinking this probably has something to do with your fixed-position navigation. Perhaps positioning the content sections you're linking to so the top is below the nav would fix it, or position their top at the document top and give them `padding-top`. – JMM Jan 20 '12 at 19:10
  • It 100% breaks the CSS - the way this trick works is CSS transitions bring the pieces of the document into/out of view by moving them, changing opacity, etc. Technically the entire page is there all the time, but different sections are either invisible or off the top/left of the screen. It looks like padding-top works, though :D – Brad Orego Jan 20 '12 at 19:21
0

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.

mbxtr
  • 2,323
  • 1
  • 15
  • 12
  • Ahh, I see what's happening. It's my pesky fixed div menu bar on top that's making it seem like it's jumping to a silly place. Using some JavaScript is okay (dismissing the banner in the lower right is done with a `.removeClass()` - I just don't want to go full-blown script for this site...yet... I'm guessing the solution would look something like "`window.setScroll(0,[heightOfMenuBar])`"? – Brad Orego Jan 20 '12 at 18:56
  • Nevermind - see above comments with @JMM. Adding padding-top to the divs works :D – Brad Orego Jan 20 '12 at 19:21