CodingForums.com - JQuery and scrollTop

Hey all i am trying to figure out what i am doing wrong here with this code. The code below works but it only works for the first link for some reason...

Code:

$(document).ready(function() {

  $('#mybutton').click(function() {

    $('html, body').animate({scrollTop: '0px'}, 500);

        return false;



  });

});

Code:

<A href="#" title="page1" id="mybutton"><span class="buttontext" id="mybutton" onMouseOver="this.style.backgroundColor='#000';" onMouseOut="this.style.backgroundColor='#CCC';">1</span></A>

<A href="#" title="page2" id="mybutton"><span class="buttontext" id="mybutton" onMouseOver="this.style.backgroundColor='#000';" onMouseOut="this.style.backgroundColor='#CCC';">2</span></A>

It works for the "1" but it only scrolls a tad bit for "2". Any ideas on why this is??

Thanks,
David