Bootstrap 3手風琴滾動到頂部時，打開內部溢出-y

Question

我有一個手風琴bootstrap 3裏面的div容器。

<div id="cont-accordion" style="height: 300px;overflow-y:scroll;"> 
    <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> 
     <!-- second panel --> 
</div> 
</div> 


jQuery("#accordion").on("shown.bs.collapse", function() { 
    var myEl = jQuery(this).find('.collapse.in'); 
    jQuery('#cont-accordion').animate({ 
     scrollTop: jQuery(myEl).offset().top 
    }, 500); 
}); 

當我打開面板時，面板被放置在頂部，但如果我打開另一個面板，這不是位於頂部。

它只有在面板前關閉時纔有效。 我該如何解決它？

例如http://jsfiddle.net/s88x9dtk/

Answer 1

對於做類似的東西，使用返回的事件來檢索觸發因素：

$('#accordion').on('shown.bs.collapse', function (event) { 
    var $el = $('[href="#' + $(event.target).attr('id') + '"]'); 

    $('#cont-accordion').animate({ 
     scrollTop: $el.offset().top 
    }, 500); 
}); 

Answer 2

試試這個：

$(document).on("shown.bs.collapse", ".panel-collapse, a[data-toggle='tab']", function() { 
     var selected = $(this); 
     $("html, body").animate({ 
     scrollTop: selected.offset().top 
     }, 1000); 
});