如何让Bootstrap 3折叠式手风琴面板加载到其内容的顶部而不是中途下载？

Question

我有一系列bootstrap 3手风琴面板，其中包含大量内容几乎正在工作...他们按需要加载折叠并按照应有的方式打开，折叠任何其他打开的面板进行中;一切都很好......

但是当我打开Panel 1并向下滚动其内容，然后打开Panel 2时，Panel 2内容将“向上”加载到可见浏览器窗口的顶部;意味着用户必须向上滚动才能看到Panel 2的顶部。令人沮丧！

我希望加载Panel 2，以便在浏览器窗口中显示它的顶部。

Here's a JSFiddle

<div class="panel-group" id="accordion">
    <!-- first panel -->
    <div class="panel panel-default">
        <div class="panel-heading"> 
            <span class="strong">
                <a data-toggle="collapse" data-parent="#accordion"
                   href="#collapseOne" id="predict">
                   Gettysburg <span class="caret"></span>
                </a>
            </span>
        </div>
        <div id="collapseOne" class="panel-collapse collapse">
            <div class="panel-body">
                <!--LOTS OF CONTENT - replaced with image-->
                <img src="http://i.imgur.com/AMhADP1.png" />
            </div>
        </div>
    </div>

    <!-- second panel -->
    <div class="panel panel-default">
        <div class="panel-heading">
            <span class="strong">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" id="aries">
                    Background <span class="caret"></span>
                </a>
            </span>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse">
            <div class="panel-body">
                <!--LOTS OF CONTENT - replaced with image-->
                <img src="http://imgur.com/j98Q0H8.png" />
            </div>
        </div>
    </div>
</div>

关于我如何解决这个问题的任何想法，好吗？

Answer 1

即使您折叠/显示可能会破坏该位置的大型元素，浏览器也会始终尝试保持其在页面中的当前位置。

你可以用Gokhan建议的两部分方法来解决这个问题：

1. 点击手风琴所显示事件的事件处理程序
2. 显示后，滚动到当前面板的顶部。

第一部分非常简单。从Collapse Events Docs我们会发现：

  

shown.bs.collapse - 当崩溃元素对用户可见时将触发此事件（将等待CSS转换完成）​​。

我们会像这样听这个事件：

$('#accordion').on('shown.bs.collapse', function (e) {
   var id = $(e.target).prev().find("[id]")[0].id;
   navigateToElement(id);
})

在shown事件中，我调用了一个函数navigateToElement，并从可见面板的标题中传入id。导航功能将使用jquery的animate：

滚动到id的位置

function navigateToElement(id) {
    $('html, body').animate({
        scrollTop: $("#" + id).offset().top
    }, 1000);
}

Working Demo in jsFiddle

Answer 2

http://bootply.com/101026

这是另一种方法（类似于@KyleMit）..找到打开的面板并使用jQuery滚动到它的顶部：

$('#accordion').on('shown.bs.collapse', function () {

  var panel = $(this).find('.in');

  $('html, body').animate({
        scrollTop: panel.offset().top
  }, 500);

});