javascript - 滚动到包装器内的 Div,而不是正文

标签 javascript jquery html

我正在使用 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/

最佳答案

对包装器而不是主体进行动画处理:

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

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

关于javascript - 滚动到包装器内的 Div,而不是正文,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21157469/

相关文章:

javascript - Jquery html() 错误?

javascript - 父级触发事件,从子级冒泡

javascript - 在 JS 中隐藏/显示 DIV 不再有效 - 顺便说一下,潜在的冲突脚本

javascript - $ ('.class' ).html() 造成违规行为

javascript - 使用 jQuery 更新/覆盖 HTML 数据?

javascript - 监听Bootstrap DatetimePicker中的点击事件

javascript - 如何将 jQuery 注入(inject) Angular 1.5 组件

javascript - 包含并使用来自 JSON 响应的 PHP 代码

javascript - 未调用表单 'onsubmit'

php - 我如何在 PHP 中创建一个与此 HTML 表单完全相同的脚本?