Javascript prevent default not being executed

Question

I am new to javascript and I have been playing around with prevent default command for ajax pagination and I have the following code:

http://jsfiddle.net/6pqfH/2/

$('.pagination').click(function(e){
    e.preventDefault();
    // fade out current content
    $('.results').css("opacity", "0.5");
    // load new content
    // ....
    // unfade
    $('.results').css("opacity", "1");
    // go back up to top of the page
    $('html,body').scrollTop(0);
});

However, it doesn't seem to be working, it links to a new page instead of executing the fade in and out and bringing it back to the top of the page. I have checked the code for the opacity and scoll and it seems to be right so where am I going wrong here?

Answer 1

It does both steps, The reason why you do not see it is that it does it right away. You need to add a delay or animation to break it up.

$('.pagination').click(function(e){
    e.preventDefault();
    // fade out current content
    $('.results').css("opacity", "0.5");
    // load new content
    // ....
    // unfade
    $('.results').fadeTo('slow', 1, function() {
      $('html,body').scrollTop(0);
    });

});

Answer 2

here's what I think you want:

http://jsfiddle.net/6pqfH/6/

<a class="pagination" id="num" href="#">4</a>  

I replaced the hred="/test" by href="#" this way the a will take you to the top alone.