Question

我正在使用http://www.dconnell.co.uk/blog/index.php/2012/03/12/scroll-to-any-element-using-jquery/中的jQuery代码滚动到Wrapper中的Div。

提供的代码动画身体（滚动身体向下点击）我试图动画div内部的滚动，而不是身体。

我的代码如下：

HTML：

    <a href="#Div3" class="ScrollDown">Scroll Down</a>

    <div class="Wrapper" style="height:400px; width:600px; overflow:hidden;">
       <div id="Div1" style="height:200px; width:600px;"></div>
       <div id="Div2" style="height:200px; width:600px;"></div>
       <div id="Div3" style="height:200px; width:600px;"></div>
   </div>

的jQuery

function scrollToElement(selector, time, verticalOffset) {
    time = typeof(time) != 'undefined' ? time : 1000;
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $(selector);
    offset = element.offset();
    offsetTop = offset.top + verticalOffset;
    $('html, body').animate({
        scrollTop: offsetTop
    }, time);
}

$(document).ready(function() {
    $('a.ScrollDown').click(function (e) {
    e.preventDefault();
    scrollToElement('#Div3');
    }); 
});

我知道它与$（'html，body'）有关.animate（{}）但我不确定如何更改它。

由于

JSFiddle http://jsfiddle.net/3Cp5w/1/

Answer 1

为包装器设置动画而不是正文：

$('.Wrapper').animate({
    scrollTop: offsetTop
}, time);

http://jsfiddle.net/robbyn/qU6F7/1/

Answer 2

尝试以下代码

    <body>     
 <a href="#Div3" class="ScrollDown">Scroll Down</a>

    <div class="Wrapper" style="height:200px; width:600px; overflow:scroll;">
       <div id="Div1" style="height:200px; width:600px;background-color:red;" ></div>
       <div id="Div2" style="height:200px; width:600px;background-color:green;" ></div>
       <div id="Div3" style="height:200px; width:600px;background-color:yellow;" ></div>
   </div>
 </body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">

function scrollToElement(selector, time, verticalOffset) {
    time = typeof(time) != 'undefined' ? time : 1000;
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $(selector);
    offset = element.offset();
    offsetTop = offset.top + verticalOffset;
    $('.Wrapper').animate({
        scrollTop: offsetTop
    }, time);
}

$(document).ready(function() {
    $('a.ScrollDown').click(function (e) {
    e.preventDefault();
    scrollToElement('#Div3');
    }); 
}); 
</script>

我认为您希望div3在Wrapper中向下滚动

您需要先将Wrapper的高度指定为一个小数字，以便滚动可见＆安培; 正如你猜测改变html，body to .Wrapper

请求帮助

Answer 3

添加jQuery更新文件参考

<script src="http://code.jquery.com/jquery-1.10.2.js"  />

在Wrapper not Body中滚动到Div

3 个答案: