jQuery Scroll To Div无法正常工作

Question

这是测试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时，目标就是这样，页面向下滚动到滚动数据属性link-to中提供的指定div。不过我的问题是：

当我尝试滚动到第一个div时，它可以工作。当我尝试从第一个div滚动到第二个div时，不是向下移动必要的空间以将用户带到div，它会向用户移动到更远的确切必要空间。我想它只是一些我忽略的简单问题，但我无法弄清楚如何去另一个div。现在唯一可以完美运行的是滚动到页面绝对顶部的任一个div。

编辑：

这些是提供点击功能的HTML元素。

<li id="whatli" class="middle box-sizing m backdrop-color clickanimate" data-link-to="#what-i-do-section">
        <div class="valign">
            <img class="" src="//<?php echo URL?>public/img/layout-icon.png" width="25px" height="auto">
            <div class="middle">What I Do</div>
        </div>
    </li>
    <li id="myworkli" class="middle box-sizing m backdrop-color clickanimate" data-link-to="#my-work-section">
        <div class="valign">
            <img class="" src="//<?php echo URL?>public/img/carousel-icon.png" width="25px" height="auto">
            <div class="middle">My Work</div>
        </div>
    </li>

这些是应该滚动到顶部的实际元素

<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-->

Answer 1

这是一个可以使用的就绪函数

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-element");