jquery click on anchor element forces scroll to top?

Question

http://stackoverflow.com/questions/720970/jquery-hyperlinks-href-value[link text][1]

I am running in to a problem using jquery and a click event attached to an anchor element. [1]: http://stackoverflow.com/questions/720970/jquery-hyperlinks-href-value "This" SO question seems to be a duplicate, and the accepted answer doesn't seem to solve the problem. Sorry if this is bad SO etiquette.

In my .ready() function I have:

jQuery("#id_of_anchor").click(function(event) { //start function when any update link is clicked
  Function_that_does_ajax();
  });

and my anchor looks like this:

<a href="#" id="id_of_anchor"> link text </a>

but when the link is clicked, the ajax function is performed as desired, but the browser scrolls to the top of the page. not good.

I've tried adding:

event.preventDefault();

before calling my function that does the ajax, but that doesn't help. What am I missing?

Clarification

I've used every combination of

return false;
event.preventDefault(); 
event.stopPropagation();

before and after my call to my js ajax function. It still scrolls to the top.

Answer 1

$("#id_of_anchor").click(function(event) { 
  // ...
  return false;
}

Answer 2

That should work, can you clarify what you mean by "before"? Are you doing this?

jQuery("#id_of_anchor").click(function(event) {
    event.preventDefault();
    Function_that_does_ajax();
});

Because that should work in the sense that if it's not working YOU are doing something wrong and we'd need to see more code. However, for the sake of completeness, you could also try this:

jQuery("#id_of_anchor").click(function() {
    Function_that_does_ajax();
    return false;
});

EDIT

Here is an example of this working.

The two links use this code:

$('#test').click(function(event) {
    event.preventDefault();
    $(this).html('and I didnt scroll to the top!');
});

$('#test2').click(function(event) {
    $(this).html('and I didnt scroll to the top!');
    return false;
});

And as you can see they are working just fine.

Answer 3

jQuery("#id_of_anchor")
    .click(function(event) {
        Function_that_does_ajax();
    })
    .removeAttr('href');

I.e., remove the unneeded HREF completely. It's kinda ugly from a purist HTML point-of-view and I'm not sure if every browser likes this (although I think I used this before somewhere without problems), but it's an option.

Answer 4

This question is more of a debugging exercise since it's stated that you are using the correct functions from the jQuery Event object.

In a jQuery event handler, you can do either, or both, of two basic things:

1. Prevent the default behavior of the element (The A HREF="#", in your case):

jQuery("#id_of_anchor").click(function(evt) { 
  // ...
  evt.preventDefault(); // assuming your handler has "evt" as the first parameter
  return false;
}

2. Stop the event from propagating to event handlers on the surrounding HTML elements:

jQuery("#id_of_anchor").click(function(evt) { 
  // ...
  evt.stopPropagation(); // assuming your handler has "evt" as the first parameter
}

Since you're not getting the expected behavior, you should take out the ajax call temporarily, replace it with some innocuous code like setting a form value, or -shudder- alert("OK") and test if you still scroll to the top.

Answer 5

you can use javascript:void(0); in href property.

Answer 6

I've been having the same problem.

I think it occurs when you bind the event before appending the element to the DOM.

Answer 7

Were you able to solve this problem? I'm seeing the same thing happen with a site I'm working on in Safari/Chrome (but not Firefox) and the strange thing is that if I enable the Inspector in both browser, the problem doesn't happen. I thought maybe it had to do with some console.logs, but I don't have any anywhere.

Answer 8

As Tilal said above:

<a id="id_of_anchor" href="javascript:void(0)" />

keeps the anchor tag looking right, allows you to assign click handlers to it with javascript, and doesn't scroll. We use it extensively just for this reason.