How to stop browser window from jumping on a #ID hash link - simplest javascript required

Question

Hi guys, Got a client who is strictly no javascript, but in this particular circumstance, I don't think I can avoid it.

I've got a "next / previous" featured area situation going on using CSS (overflow: hidden and position: absolute) - where the click next or previous (a href="#section...") then brings the relevant div ID into view -but, the browser jumps to the top of the screen which is really very annoying.

What's the simplest possible way to prevent this jumping from happening (with javascript) - yet still be usable for users with javascript turned off?

Thanks in advance...

Answer 1

You can only solve this problem by a) Using JS or b) Getting rid of those anchor links.

If you chose choice a:

var links = document.getElementsByTagName('a');
var link;
for(var i = 0, j = links.length; i < j; i++) {
    link = links[i];
    if(link.href.substring(0, 1) == '#') {
       link.onclick = function(e) {
          var ev = e || event;
          ev.preventDefault();
       };
    }
}