jquery - scrolltop not going to right element -

i have div tags populated rows (tr , td tags). users can add new rows dynamically , append them (each of list_content dept divs can have variable number of rows within them size change frequently):

$("#list_content_"+ dept_id).append(row); 

after row appended, want scroll new row can see (seeing believing), none of different code has worked (they don't scroll right place). either want new row @ top of screen, or visible. i'm not picky, want consistent.

what hasn't worked:

$("#row_"+ id).animate({scrolltop: $("#row_"+ id).prop("scrollheight")}, 2000); 

or

$("#list_content_"+ dept_id).scrolltop($("#list_content_"+ dept_id).scrolltop() + $("#row_" + id).position().top - $("#list_content_"+ dept_id).height()/2 + $("#row_" + id).height()/2); 

or

$('html, body').animate({ scrolltop: $("#list_content_"+ dept_id).offset().top -80}, 2000); 

or

$("#list_content_"+ dept_id).animate({ scrolltop: $("#list_content_"+ dept_id).prop("scrollheight")}, 2000); 

any appreciated! clearly, i'm not expert on this. thanks!!

how this:

$('html, body').animate({ scrolltop: row.offset().top }, 2000); 

since still hold reference row, when appended it's coordinates when calling .offset().