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

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 th开发者_高级运维e 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?

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();
       };
    }
}

Just replace '#' link to 'javascript:void(0)' and your page will not gona scroll

HTML

<a href="javascript:void(0);" title=" ">Link</a> // if you want no link, just like '#' link.
<a href="javascript:page(0);" title=" ">Link</a> // for link that you don't want to show.

JS

function page()
{ window.location.assign("home.html"); }