Bootstrap手風琴，滾動到點擊活動（打開）手風琴的頂部？

Question

我在使用Bootstrap製作一個響應式網站，它包含大量文本的手風琴，當您讀到底部並點擊下一個手風琴時，大量文本被摺疊，而我留在底部這一頁。

我發現這個有用的代碼從Bootstrap accordion scroll to top of active panel heading，但它滾動到所有手風琴的頂部，而不是特定的開放。

$(function() { 
     $('#accordion').on('shown.bs.collapse', function (e) { 
      var offset = $('.panel.panel-default > .panel-collapse.in').offset(); 
      if(offset) { 
       $('html,body').animate({ 
        scrollTop: $('.panel-heading').offset().top -20 
       }, 500); 
      } 
     }); 
    }); 

該代碼如何修改爲滾動到當前活動手風琴的頂部？

HTML;

<div class="panel-group custom-padding no-sides" id="accordion">     
         <div class="panel panel-default"> 
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse1"> 
           <div class="panel-heading custom-padding"> 
            <h4 class="panel-title text-uppercase">Short synopsis <i class="fa fa-chevron-down pull-right"></i></h4> 
           </div> 
          </a> 
          <div id="collapse1" class="panel-collapse collapse"> 
           <div class="panel-body"> 
            <p id="game-deck"></p> 
           </div> 
          </div> 
         </div>      
         <div class="panel panel-default"> 
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse2"> 
           <div class="panel-heading custom-padding"> 
            <h4 class="panel-title text-uppercase">Concepts <i class="fa fa-chevron-down pull-right"></i></h4> 
           </div> 
          </a> 
          <div id="collapse2" class="panel-collapse collapse"> 
           <div class="panel-body"> 
            <ul class="whatever" id="game-concepts"></ul> 
           </div> 
          </div> 
         </div>      
         <div class="panel panel-default"> 
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse3"> 
           <div class="panel-heading custom-padding"> 
            <h4 class="panel-title text-uppercase">Themes <i class="fa fa-chevron-down pull-right"></i></h4> 
           </div> 
          </a>  
          <div id="collapse3" class="panel-collapse collapse"> 
           <div class="panel-body" id="game-themes"></div> 
          </div> 
         </div> 

         <div class="panel panel-default"> 
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse4"> 
           <div class="panel-heading custom-padding"> 
            <h4 class="panel-title text-uppercase">Notable locations<i class="fa fa-chevron-down pull-right"></i></h4> 
           </div> 
          </a>  
          <div id="collapse4" class="panel-collapse collapse"> 
           <div class="panel-body" id="game-locations"></div> 
          </div> 
         </div> 

         <div class="panel panel-default"> 
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse5"> 
           <div class="panel-heading custom-padding"> 
            <h4 class="panel-title text-uppercase">Notable characters<i class="fa fa-chevron-down pull-right"></i></h4> 
           </div> 
          </a>  
          <div id="collapse5" class="panel-collapse collapse"> 
           <div class="panel-body" id="game-characters"></div> 
          </div> 
         </div> 

         <div class="panel panel-default"> 
          <a data-toggle="collapse" data-parent="#accordion" href="#collapse6"> 
           <div class="panel-heading custom-padding"> 
            <h4 class="panel-title text-uppercase">Full description <i class="fa fa-chevron-down pull-right"></i></h4> 
           </div> 
          </a>  
          <div id="collapse6" class="panel-collapse collapse"> 
           <div class="panel-body" id="game-description"></div> 
          </div> 
         </div> 

Answer 1

您可以通過獲取「目標元素」的頂部，然後調用動畫對身體動畫滾動..

$('html, body').animate({ 
    scrollTop: $("#target-element").offset().top 
}, 1000); 

修改它是這樣將幫助你實現什麼你是後

$('.panel-collapse').on('shown.bs.collapse', function (e) { 
    var $panel = $(this).closest('.panel'); 
    $('html,body').animate({ 
     scrollTop: $panel.offset().top 
    }, 500); 
}); 

來源：http://www.abeautifulsite.net/smoothly-scroll-to-an-element-without-a-jquery-plugin-2/

併發症ementary小提琴：https://jsfiddle.net/hjugdwbp/

Answer 2

我正在開發一個需要相同功能的項目。提出了以下代碼。我添加了澄清變量：

$('#accordion').on('shown.bs.collapse', function (e) { 

var panelHeadingHeight = $('.panel-heading').height(); 
var animationSpeed = 500; // animation speed in milliseconds 
var currentScrollbarPosition = $(document).scrollTop(); 
var topOfPanelContent = $(e.target).offset().top; 

if (currentScrollbarPosition > topOfPanelContent - panelHeadingHeight) { 
    $("html, body").animate({ scrollTop: topOfPanelContent - panelHeadingHeight }, animationSpeed); 
}});