Javascript jQuery滚动到Div无法正常工作

这是一些测试jQuery动画滚动的基本代码：

$("#whatli").click(function(){
    link = $(this).data('link-to');
    $('#content').animate({scrollTop: $(link).offset().top},1000);
});
$("#myworkli").click(function(){
    link = $(this).data('link-to');
    $('#content').animate({scrollTop: $(link).offset().top},1000);
});

这样做的目的是，当我单击侧菜单上出现的某个div时，页面向下滚动到scrollees数据属性链接中提供的指定div。但我的问题是：

当我尝试滚动到第一个div时，它工作了。当我尝试从第一个div滚动到第二个div时，它没有向下移动必要的空间以将用户带到div，而是向上移动确切的必要空间，将用户带到更远的地方。我想这只是我忽略的一个简单问题，但我不知道如何从一个部门转到另一个部门。现在唯一能完美工作的就是从页面的绝对顶部滚动到任何一个div

编辑： 这些是提供单击功能的HTML元素。 这些是应该滚动到顶部的实际元素

---

这里有一个现成的函数，您可以使用

function scrollToElement($element, time) {
    var position = false;

    try {
        position = $element.offset().top;
    } catch (err) {
        ;
    }
    if (!position) {
        return;
    }

    if (typeof time === 'undefined' || !time) {
        time = 1000; // default time
    }

    $('html, body').animate({
        scrollTop : position
    }, time);
}

---

$element应该是元素的对象，如$.my元素

我们能看到html标记吗？

<div id="what-i-do-section" class="section box-sizing" style="margin-    top:250px;"> <!--Lots of markup inside-->
</div>

<div id="my-work-section" class="section box-sizing"> <!--Lots of markup inside-->

function scrollToElement($element, time) {
    var position = false;

    try {
        position = $element.offset().top;
    } catch (err) {
        ;
    }
    if (!position) {
        return;
    }

    if (typeof time === 'undefined' || !time) {
        time = 1000; // default time
    }

    $('html, body').animate({
        scrollTop : position
    }, time);
}