タブを表示した後にスクロールする

Question

私のページにはブートストラップのタブがありますが、それをクリックするとタブは表示されません。位置を上にスクロールしてタブが見えるようにする方法はありますか？私が見つけたものは何も私を助けなかった。私はタブの位置を変えることも、隠れたアンカーを使うこともできません。タブはアンカーです。

<ul class="nav nav-tabs" role="tablist"> 
    <li class="active bio" role="presentation"><a href="#bio" role="tab" data-toggle="tab">biografie</a></li> 
    <li class="films hidden-sm hidden-md hidden-lg" role="presentation"><a href="#films" aria-controls="films" role="tab" data-toggle="tab">filmografie</a></li> 
    <li class="trivia hidden-xs" role="presentation"><a href="#trivia" role="tab" data-toggle="tab">zajímavosti</a></li> 
    <li class="awards hidden-xs" role="presentation"><a href="#awards" role="tab" data-toggle="tab">ocenění</a></li> 
    <li class="videos hidden-xs" role="presentation"><a href="#videos" role="tab" data-toggle="tab">videa</a></li> 
    <li class="gallery hidden-xs" role="presentation"><a href="#gallery" role="tab" data-toggle="tab">galerie</a></li> 
    <li class="contact hidden-xs" role="presentation"><a href="#contact" role="tab" data-toggle="tab">kontakt</a></li> 
</ul> 

これは私がアンカーに取得するために使用JSです：タブ付き

$("ul.nav-tabs > li > a").on("shown.bs.tab", function(e) { 
    var id = $(e.target).attr("href").substr(1); 
    window.location.hash = id; 
    }); 

    var hash = window.location.hash; 
    $('.nav-tabs a[href="' + hash + '"]').tab('show'); 

ページ：http://testovani-frameworku.wz.cz/jennifer-lawrence.html#awards

Answer 1

あなたは非常にトップに行きたい場合は、あなたがそれを行うことができカップルの方法

window.scrollTo(0, 0); 

または

$("mySelector").animate({ scrollTop: 0 }, "fast"); 

または

$(window).scrollTop(0); 

それはちょうどあなたが望む効果の種類により異なります。アニメーション効果を必要としない場合は、scrollTopを0に設定することができます。バニラJSを使用するだけでいいですか。

Answer 2

これは私がそれを解決した方法です。私は、タブのIDの最後に「-tab」を追加し、元のIDにリンクがあります。

$("ul.nav-tabs > li > a").on("shown.bs.tab", function(e) { 
    var id = $(e.target).attr("href").substr(1); 
    id = id.substring(0, id.length-4); 
    window.location.hash = id;  
}); 

var hash = (window.location.hash); 
$('.nav-tabs a[href="' + hash + '-tab"]').tab('show');