javascript - ScrollTo() 函数无法正常处理部分

Question

我有一系列关于我刚刚完成开发的应用程序的部分。我正在使用 jQuery 的scrollTo 插件。过去它对我来说一直很有效。

应用程序应该执行以下操作:

1. 加载所有部分，第一个部分立即展开，其他所有部分保持折叠状态(这有效)
2. 您可以点击另一部分，当前打开的部分将折叠，而您点击的部分将展开(这有效)
3. 展开完成后，窗口将滚动到展开部分的顶部(这不起作用)

我需要第三步的帮助。我的代码如下。

我搜索了有关scrollTo()插件和ScrollTop使用的各种主题。我都尝试过，但没有任何改变。

我想知道它是否与调用切换函数时有关，但我不确定。

我真的希望能在这里找到答案。如果您需要进一步的解释或代码，请告诉我!

    //module expansion and contraction
$('.module-heading').click(function(){
    var id = $(this).attr('id');

    var data = $(this).data('toggle');
    $('.app-section').each(function(){
        if($(this).is(':visible')){
            $(this).toggle('slow');
        }
    })
    $(data).toggle('slow', function(){
        $(id).scrollTo(100);    
    });
});

这里还有示例 HTML

<div class='row module-heading module-heading-plain' data-toggle='#questionaire'>
    <div class='form-group'>
        <div class='col-md-12'>
            <h4 class='text-info'>
                Pre-Application Questionaire
            </h4>
        </div>
    </div>                  
</div>
<span id='questionaire'>
       <!-- form goes here -->
</span>

这是 fiddle 的链接 http://jsfiddle.net/5q48n0z1/4/

Answer 1

您似乎想将正文滚动到新部分。因此，我们需要定位 html/body 才能做到这一点( fiddle ):

$('.module-heading').click(function(){

    var $this = $(this);

    $('.app-section:visible').hide("slow");

    $($this.data('toggle')).show('slow', function(){
        $("html,body").animate({
            scrollTop: $this.offset().top   
        }); 
    });

});

_{注意:您需要有溢出内容才能滚动正文。您可以考虑在正文中添加一些填充。}