【问题标题】：jQuery Scroll To Div Not Working ProperlyjQuery 滚动到 Div 无法正常工作
【发布时间】：2015-01-17 17:38:34
【问题描述】：

这是一些测试 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 数据属性 link-to 中提供的指定 div。但是我的问题是这样的：

当我尝试滚动到第一个 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-->

【问题讨论】：

我们可以看到 html 标记吗？

标签： javascript jquery html jquery-animate scrolltop

【解决方案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");

【讨论】：