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   
        }); 
    });

});

_{注意：您需要具有溢出內容才能滾動正文。 您可能會考慮在主體上添加一些填充。}