jQuery scrollTop in Bootstrap

Ciao Sto usando jQuery nel tentativo di scorrere fino al div #target quando viene cliccato #selector. I due elementi si trovano in pannelli Tab Panel / Tab Panel separati da Bootstrap.

Sembra che non riesca a far funzionare l’effetto di scorrimento quando il #target si trova al di fuori del pannello / riquadro padre del selettore #.

 
...
...

Qualche idea su come posso ottenere l’effetto scrollTop in una scheda diversa? Sono impiccato sul CSS Bootstrap? Suggerimenti alternativi? Grazie per il tuo tempo.

Ecco il JS, la prima funzione cambia solo le tabs in base all’elemento href dell’elemento selezionato.

 $(document).ready(function() { $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) { var target = this.href.split('#'); $('.nav a').filter('a[href="#' + target[1] + '"]').tab('show'); }) $('#selector').click(function(e) { e.preventDefault(); $('html, body, nav').delay(500).animate({ scrollTop: $("#target").offset().top }, 500); }); }); 

Usando .closest (che ottiene il genitore) ottieni la scheda in cui è posizionato il div #target . Quindi apri quella scheda. Quindi scorrere verso l’alto usando animate.

Invece di usare .delay() ho usato setTimeout perché l’animazione si verifica prima che la scheda sia aperta, cosa che non è richiesta.

 $(document).ready(function() { $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) { var target = this.href.split('#'); showTab(target[1]); }); $('#selector').click(function(e) { e.preventDefault(); var target = $('#target').closest('.tab-pane').attr('id'); showTab(target); setTimeout(function() { $('html, body, nav').animate({ scrollTop: $("#target").offset().top }, 500); }, 500); }); }); function showTab(target) { $('.nav a').filter('a[href="#' + target + '"]').tab('show'); } 

Ecco una demo http://jsbin.com/xomafe/edit?html,js,output

Spero che questo ti aiuti