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>

这里是小提琴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   
        }); 
    });

});

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