Jquery animate scrolling not working properly

I have a div with a table inside and several content d开发者_高级运维ivs in cells. This div has a vertical scroll bar that I would like to move via jquery code. I have some animation code that does move the scroll bar after clicking an anchor link. However the scroll bar movement is not consistent and only rarely goes to my desired div. Also the behavior is inconsistent as the scroll bar will move to a different location if I click on a link more than once. Note all of the divs are "stacked" in rows in my table. I've included the code for the javascript below.

$('#groupScroller').animate({ scrollTop: $(selector).offset().top }, 'slow');

check your doctype tag at first line of your html code for html version, i think only version 5 or xhtml supports scrollTop.

The demo has been removed but the code is still available.

$('.scrollPage').click(function() {
   var elementClicked = $(this).attr("href");
   var destination = $(elementClicked).offset().top;
   $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-20}, 500 );
   return false;
});

The main reason this wouldn't work would be if you didn't manage to get a position for the destination element - so check var destination to see what value you get back...