Bootstrap手风琴，在点击时滚动到活动（开放）手风琴的顶部？

我正在使用Bootstrap创建一个响应式网站，它包含大量文本的手风琴，当你读到底部并单击下一个手风琴时，大量文本被折叠，我留在页面底部。

我发现这个有用的代码从Bootstrap手风琴滚动到活动面板标题的顶部，但它滚动到所有手风琴的顶部，而不是打开的特定手风琴。

$(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;

  
 
  
 
Short synopsis 
 
  
 
 
 
 
 
 
  
 
Concepts 
 
  
 
 
 
 
 
 
  
 
Themes 
 
  
 
 
 
 
  
 
Notable locations
 
  
 
 
 
 
  
 
Notable characters
 
  
 
 
 
 
  
 
Full description 
 
  
 
 
  

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/

互补的小提琴： https ： //jsfiddle.net/hjugdwbp/

---

编辑：2018-05-25

Bootstrap 4示例

使用手风琴示例： https ： //getbootstrap.com/docs/4.0/components/collapse/#accordion-example我修改了代码以支持卡片。

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

小提琴： https ： //jsfiddle.net/agpkc4v2/1/

Answer 2

我正在开发一个需要相同function的项目。 想出了以下代码。 我添加了变量以便澄清：

 $('#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); }});