ブートストラップ3の折りたたまれたアコーディオンパネルを途中ではなくコンテンツの上部にロードするにはどうすればよいですか？

Question

多くの内容のブートストラップ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

ブラウザは、その位置を乱す可能性のある大きな要素を折りたたむ/表示しても、ページ内の現在の位置を維持しようとします。

あなたはグーカンによって提案された2つのパートのアプローチでこれを解決することができます：それは表示されます一度アコーディオンのためのイベントハンドラに

1. タップは、現在のパネルの上部にイベント
2. スクロールを示しています。

最初の部分はかなりシンプルです。 Collapse Events Docsから、我々は見つけることができます：

shown.bs.collapseを - このイベントが発生し崩壊要素がユーザーに表示行われたとき（CSSの遷移が完了するのを待ちます）。

私たちは、このような、このイベントのために聞くだろう：私は機能navigateToElementと呼ばれ、目に見えるパネルのヘッ​​ダからidに渡されましたshownイベントで

$('#accordion').on('shown.bs.collapse', function (e) { 
    var id = $(e.target).prev().find("[id]")[0].id; 
    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); 

});