jquery animate/scrollTop для нескольких якорей внутри divs

Question

У меня возникла проблема с реализацией относительно сложных функций автоматического прокрутки на моей странице. Это показывает проблему в моем коде ...

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

У меня есть несколько дивы на моей странице (синий, красный, зеленый в моем примере), что я не только хочу, чтобы иметь возможность перейти к (который верхние 3 кнопки в моем примере достигают совершенно), но я хочу, чтобы иметь возможность прокручивать WITHIN (что нижние 3 кнопки представляют мою лучшую попытку).

Я не могу понять, почему функция прокрутки внутри функции хорошо работает на моем первом div (кнопка «scrollTo3rdBlueItem»), но затем менее точно с другими divs (кнопки «scrollTo3rdRedItem» и «scrollTo3rdGreenItem») , В моем полном веб-приложении (которое, очевидно, имеет больше данных для прокрутки), я в основном вижу, что чем ниже страница, размещенная родительским div, тем менее точно я могу ее прокручивать.

Я изо всех сил пытаюсь идентифицировать большую часть рисунка, поэтому не могу просто попробовать изменить значения смещения. Любые идеи, что я мог бы делать неправильно здесь, были бы чрезвычайно оценены!

... так как мне не разрешалось публиковать это без котировочного кода - вот функция jquery, которую вы можете видеть в моем кодефене!

function scrollToParent(parentID){ 
     $('html,body').animate({scrollTop: $('#'+parentID).offset().top}, 500); 
} 
function scrollToChild(parentID, childID){ 
     //first focus on the parent 
    scrollToParent(parentID); 

     $('#'+parentID).animate(
     {scrollTop: $('#'+ childID).offset().top - 100} 
     , 500); 
} 

Answer 1

UPDATE

Ответ здесь был COMPLETETLY неправильно. Остался здесь, чтобы сохранить комментарии.

ОБНОВЛЕНИЕ 2

Получил IT! Вам необходимо принять во внимание смещение родительского div. Обновите функцию scrollToChild ниже;

$('#'+parentID).animate(
    { 
     scrollTop: $('#'+ childID).offset().top - $('#'+parentID).offset().top 
    }, 500);