twitter-bootstrap – 如何使Bootstrap 3折叠的手风琴面板放在其内容的顶部,而不是一半？

我有一系列引导3手风琴小组,其中包含了大量内容,几乎可以正常工作…他们按需要加载折叠,打开时应该点击,折叠任何其他打开的面板;都好…

但是当我打开panel 1并向下滚动其内容,然后打开panel 2,Panel 2的内容通过可视浏览器窗口的顶部加载“向上”;意思是用户必须向上滚动才能看到面板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>

有什么想法可以解决这个问题吗？

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

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