twitter-bootstrap - Bootstrap のアクティブなタブが画面の上部に移動しない

Question

ここのチュートリアルに基づいて Bootstrap 2.3.2 を使用するタブ システムがあります: http://webdesigntutsplus.s3.amazonaws.com/tuts/319_bootstrap_pills_tabs/Tabs-Pills-BEGIN/tabs-pills.html

私のナビリストはページに固定されており、各リンクをクリックすると、そのタブ内の情報が開きます。

私の問題は、各タブのコンテンツが非常に長く、スクロールが必要なことです。リストの途中で他のナビゲーション リンクの 1 つをクリックすると、新しいタブに変わりますが、ページの途中で残ります。動作は、アクティブなタブの先頭に向かう必要があります。すなわち。ページを新しいアクティブなタブの上部に移動します。

<div class="tab-pane" id="tabs-stacked">
<div class="tabbable tabs-left ">
    <ul class="nav nav-pills nav-stacked span2 sidebar-nav-fixed" id="tabs" data-tabs="tabs">
        <li class="active"><a href="#tabs2-pane1" data-toggle="tab">Tab 1</a></li>
        <li><a href="#tabs2-pane2" data-toggle="tab">Tab 2</a></li>
        <li><a href="#tabs2-pane3" data-toggle="tab">Tab3</a></li>
    </ul>
    <div class="tab-content span10 offset2 middle-bar-information">
        <div id="tabs2-pane1" class="tab-pane active">
            <p class="header">TEST TEST TEST
            </p>
            <br><br>
        </div><!-- End tabs2-pane1 -->
        <div id="tabs2-pane2" class="tab-pane">
            <p class="header">Okay. Now... Hardened Kevlar plates over titanium-dipped, tri-weave fibers for flexibility. </p>
        </div><!-- End tabs2-pane2 -->
    </div><!-- End tab-content -->
</div><!-- End tabbable --> 

ここでテストできます: http://bootply.com/80587

私はブートストラップ 2.3.2 を使用しています。bootstrap-tab.js を含む bootstrap.min.js をロードしています。タブは正常に機能し、タブ コンテンツの上部に移動しないこと以外はアクティブになります。