Javascript 在溢出div中设置滚动到元素顶部的动画

我正在努力想办法解决这个问题。我有一个div设置为

overflow:scroll。我希望能够单击一个链接，并使该div中的内容滚动到链接元素的顶部。出于某种原因，它似乎总是滚动，直到元素的顶部碰到主体的顶部。我需要它在到达溢出div顶部时停止。在下面的示例中，当您单击“链接到段落3”时，我需要它将段落3放置在可滚动div的顶部


$（文档）.ready（函数（）{
$（“a”）。单击（功能（e）{
e、 预防默认值（）；
var anchor=$（this.attr（“href”）；
控制台日志（锚）；
$（“.parent”）.animate({
scrollTop:$（锚定）.offset（）.top-$（“.parent”）.offset（）.top
}, 2000);
});
});
body{背景色：棕褐色；}
.parent{height:100px；overflow-y:scroll；背景色：#ffff；页边空白顶部：100px；}

第1段
Lorem ipsum dolor sit amet，奉献精英。在南部，你的脸上是否有一块巨大的毛发？犯过错的人，同样也犯错误。

第2段
Lorem ipsum dolor sit amet，奉献精英。在南部，你的脸上是否有一块巨大的毛发？犯过错的人，同样也犯错误。

第3段
Lorem ipsum dolor sit amet，奉献精英。在南部，你的脸上是否有一块巨大的毛发？犯过错的人，同样也犯错误。

第4段
Lorem ipsum dolor sit amet，奉献精英。在南部，你的脸上是否有一块巨大的毛发？犯过错的人，同样也犯错误。

第5段
Lorem ipsum dolor sit amet，奉献精英。在南部，你的脸上是否有一块巨大的毛发？犯过错的人，同样也犯错误。

jQuery的方法返回元素相对于文档的偏移量。为了抵消这一点，需要减去容器的偏移量。下面我只修改了javascript的第4行


$（文档）.ready（函数（）{
$（“a”）。单击（功能（e）{
e、 预防默认值（）；
var anchor=$（this.attr（“href”）；
控制台日志（锚）；
$（“.parent”）.animate({
scrollTop:$（“.parent”）.scrollTop（）+$（锚定）.offset（）.top-$（.parent”）.offset（）.top
}, 2000);
});
});
正文{
背景颜色：棕褐色；
}
.家长{
高度：100px；
溢出y：滚动；
背景色：#ffff；
边缘顶部：100px；
}

第1段
Lorem ipsum dolor sit amet，奉献精英。在南部，你的脸上是否有一块巨大的毛发？犯过错的人，同样也犯错误。

第2段
Lorem ipsum dolor sit amet，奉献精英。在南部，你的脸上是否有一块巨大的毛发？犯过错的人，同样也犯错误。

第3段
Lorem ipsum dolor sit amet，奉献精英。在南部，你的脸上是否有一块巨大的毛发？犯过错的人，同样也犯错误。

第4段
Lorem ipsum dolor sit amet，奉献精英。在南部，你的脸上是否有一块巨大的毛发？犯过错的人，同样也犯错误。

第5段
Lorem ipsum dolor sit amet，奉献精英。在南部，你的脸上是否有一块巨大的毛发？犯过错的人，同样也犯错误。

我现在遇到了一个奇怪的问题。。如果单击转到第3段，然后转到第4段，它将永远不会滚动到正确的位置。为什么呢？我在帖子中更新了这个片段。@Dustin它没有考虑到.parent可能已经被向下滚动的事实。我已经修改了答案中的代码来修复。