Question

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

应用程序的作用如下：

所有部分都会加载，第一部分会立即展开，其他所有部分都会折叠（这样可行）
您可以点击其他部分，当前打开的部分将会折叠，您点击的部分将展开（这可以）
扩展完成后，窗口将滚动到展开部分的顶部（这不起作用）

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

我搜索了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   
        }); 
    });

});

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

ScrollTo（）函数与部分无法正常工作

1 个答案: