javascript - jquery animate/scrollTop to multiple anchors inside divs -

i'm having problem implementing relatively complicated auto-scroll functionality on page. displays issue in code...

http://codepen.io/d3wannabe/pen/xxxdqq

i have multiple divs on page (blue,red,green in example) not want able scroll (which top 3 buttons in example achieve perfectly), want able scroll within (which bottom 3 buttons represent best attempt at).

the thing can't figure out, why scroll within function works on first div ("scrollto3rdblueitem" button), less accurately other divs ("scrollto3rdreditem" , "scrollto3rdgreenitem" buttons). in full web application (which has more data scroll through), see lower down page parent div positioned, less accurately i'm able scroll within it.

i'm struggling identify of pattern though can't try tweaking offset values. ideas might doing wrong here hugely appreciated!!

...since wasn't allowed post without quoting code - here's jquery function can see in codepen!

function scrolltoparent(parentid){         $('html,body').animate({scrolltop: $('#'+parentid).offset().top}, 500);  } function scrolltochild(parentid, childid){       //first focus on parent   scrolltoparent(parentid);        $('#'+parentid).animate(         {scrolltop: $('#'+ childid).offset().top - 100}         , 500); } 

update

answer here completetly wrong. left here preserve comments.

update 2

got it! need take in account offset of parent div. update scrolltochild function below;

  $('#'+parentid).animate(     {       scrolltop: $('#'+ childid).offset().top - $('#'+parentid).offset().top     }, 500);