Stop javascript onclick 'page jumping'

Question

Can't seem to prevent the jump to top of page behavior.

I've tried everything suggested here http://stackoverflow.com/questions/1631924/preventing-onclick-page-jumps

What else could be done to stop onclick page jumps?

Thanks.

Here's a snippet of the HTML and JS

HTML:

<a href="javascript: return null;" onclick='javascript:getPosts("page=1&display=all"); return false;'>Everyone</a>


JS:

function getPosts(qry) {
    var thePage = 'posts.php?' + qry;
    myReq.open("GET", thePage, true);
    myReq.onreadystatechange = theHTTPResponse;
    myReq.send(null);
}

function theHTTPResponse() {
    if (myReq.readyState == 4) {
     if(myReq.status == 200){
      var response = myReq.responseText;
      document.getElementById('posts').innerHTML = response;
     }
    } else {
     document.getElementById('posts').innerHTML = '<img src="images/ajax-loader.gif" />';
    }
}

Answer 1

If returning false in the onclick attribute isn't working, there's something else going on. The solutions posted there do work in a normal situation, so we'll need to see your code.

Answer 2

Returning false in the onclick is really the way to go. If that's not working for you, we need to see code.

Answer 3

I've always used:

<a href=""></a>

Mostly because I hate that using

<a href="#"></a>

appends a # to the end of the url.

Edit:

Are you sure it isn't a browser specific problem or preference?

Answer 4

all you need is

<a href="javascript:">My Link!</a>

and add whatever other attributes you need to the tag.

Answer 5

As far as I know, the events are already JS so, you dont need to put onclick="javascript:...". Try this:

<a href="javascript: return null;" onclick='getPosts("page=1&display=all"); return false;'>Everyone</a>

Answer 6

<a href="javascript:;" onclick="...">Everyone</a>

Note the semicolon.

Answer 7

Strangely, the problem was corrected after I deleted the contents of my php script, saved, then reinserted the same content. Not sure what effect this had but seems to fix the jumping.

I guess the issue was never with returning false in onclick.

Thanks for everyone's time!

Answer 8

this is what i use and it works

<a href="javascript:getPosts('page=1&display=all'); return false;">Everyone</a>

When it comes to ajax requests using the function that is tied to the 'onClick' event as the href always solves the page jumping problem for me.

Answer 9

href="javascript:void(0);"