Question

I have a div with a table inside and several content divs 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');

Answer 1

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…