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); 
}});