AJAX scrolling problem

Hello, I have a simple page, with this :

<script type="text/javascript" src="http://www.my_domain.com/js/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#do_it").click(function () {
$("p").show("slow");
});
});
</script>

<a href="#" id="do_it">Do it!</a>
<span>Are you sure? (type 'yes' if you are) </span>
<p style="display:none;">I'm hidden...</p>

I am using jquery, this is an example from jquery website, so my problem is, if this form is on the bottom of the page and if I click "Do it!", all works, but it scrolls to the top of the page, and it should normaly maintain the position.
How do I stop that ?

 

because the event is still running. you have href=# and that's a possible valid anchor link to go to. your code runs then the doc goes to top as you really have no such anchor.

i am not sure how jquery deals with events, tbh.

in mootools you'd do:

... addEvent("click", function(e) {
e.preventDefault(); // e.stop(); also works e being the event returned.
...
});

edit: had a look at their manual... same

$("#do_it").click(function (e) {
    e.preventDefault();
    $("p").show("slow");
});

PHP:

 

Thanks a lot.