Bootstrap崩溃 – 转到未清项目的顶部？

我正在使用bootstrap collapse函数，但是当我打开一个包含大量内容的元素时，打开下一个元素，它会向下跳转并且不会到达open元素的顶部。 我已经尝试使用如下所示的scrollto插件，但它不起作用：

JS：

$(function(){ $('a.accordion-toggle').click(function(){ $.scrollTo( this, 500); }) }); 

HTML：

 
 
 
 Austria 
  
 
 
 
 Filmladen  Michael Stejskal 
 
 Polyfilm  Hans Koenig 
 
 Stadtkino Filmverleih  Claus Philipp 
 
 
 
 
 Belgium 
  
 
 
 
ABC Nicolaine Den Breejen
 
Cineart-Cinelibre Eliane du Bois & Stephan de Potter
 
Imagine Film Distribution Christian Thomas & Tinne Bral
 
Le Parc Distribution Jean-Pierre Pécasse
 
Lumière Jan de Clerq & Annemie Degryse
 
O'Brother Olivier Bronckart
 
Paradiso Filmed Entertainment Olivier Mortagne
 
U-Dream Stephanie Van den Berge
 
 
 
 
 Bulgaria 
  
 
 
 
Artfest Stefan Kitanov & Mira Staleva
 
Pro Films Emil Simeonov
 
 
 
 
 Canada 
  
 
 
 
Metropole Films Charles Tremblay
 
  

有任何想法吗？

Answer 1

我有scrollto使用bootstrap崩溃但代码是WordPress。 我带来了你的内容并且它有效。 Bootstrap Collapse有一个显示的事件，然后您需要知道要向上滚动的内容的高度。

 $(".accordion-body").on("shown", function () { var selected = $(this); var collapseh = $(".collapse .in").height(); $.scrollTo(selected, 500, { offset: -(collapseh) }); }); 

您可能需要稍微调整一下，但它应该可以工作。

Answer 2

Bootstrap 3中的事件名称已更改，因此@ bboymaanu将无法正常工作。 它应该使用’shown.bs.collapse’事件。

 $(".accordion-body").on("shown.bs.collapse", function () { var selected = $(this); var collapseh = $(".collapse.in").height(); $.scrollTo(selected, 500, { offset: -(collapseh) }); }); 

这里记录了新事件。

Answer 3

以下是基于其他建议的解决方案：

• 也适用于嵌入式手风琴
• 滚动所以也显示标题
• 只有在屏幕上还没有
• 动画也是如此

码：

 $('#accordion').on('shown.bs.collapse', function (e) { // Validate this panel belongs to this accordian, and not an embedded one var actualAccordianId = $('a[href="#' + $(e.target).attr('id') + '"').data('parent'); var targetAccordianId = '#' + $(this).attr('id'); if (actualAccordianId !== targetAccordianId) return; var clickedHeader = $(this).find('.panel > .collapse.in').closest('.panel').find('.panel-heading'); var offset = clickedHeader.offset(); var top = $(window).scrollTop(); if(offset) { var topOfHeader = offset.top; if(topOfHeader < top) { $('html,body').animate({ scrollTop: topOfHeader}, 100, 'swing'); } } }); 

Answer 4

 $(".accordion-body").on("shown", function () { var id = $(this).attr('id'); $('html, body').animate({scrollTop: $('#'+id).offset().top + -50}, 1000); }); }); 

简单的例子。 “.top + -50”距离元素顶部50px，允许在顶部填充一些填充物。

Answer 5

 $('#accordion').on('shown.bs.collapse', function () { var panel = $(this).find('.in'); $('html, body').animate({ scrollTop: panel.offset().top }, 500); }); 

Answer 6

你可以试试这个：

我使用以下，像魅力一样：

 $("#accordion2").bind('shown', function() { var active=$("#accordion_univlist .in").attr('id'); scrollhere('#'+active); $('.closebutton-right').hide(); }); $('.accordion-heading').click(function () { // Do something if you want to do on click else ignore this handler. } function scrollhere(destination){ var stop = $(destination).offset().top - 80; var delay = 1000; $('body,html').animate({scrollTop: stop}, delay); return false; } 

它也有弹跳效果，我喜欢它。