javascript - jquery animate/scrollTop 到 div 内的多个 anchor

Question

我在我的页面上实现相对复杂的自动滚动功能时遇到了问题。这显示了我的代码中的问题...

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

我的页面上有多个 div(在我的示例中为蓝色、红色、绿色)，我不仅希望能够滚动到它们(我示例中的前 3 个按钮完美实现)，而且我希望能够在内部滚动(底部的 3 个按钮代表我的最佳尝试)。

我想不通的是，为什么滚动功能在我的第一个 div(“scrollTo3rdBlueItem”按钮)上运行良好，但在其他 div(“scrollTo3rdRedItem”和“scrollTo3rdGreenItem”按钮)上却不太准确。在我的完整 Web 应用程序(显然有更多数据需要滚动浏览)中，我基本上看到父 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

更新

这里的回答是完全错误的。留在这里以保留评论。

更新 2

知道了!您需要考虑父 div 的偏移量。将您的 scrollToChild 函数更新为以下内容；

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