Bootstrap 崩溃 - 转到打开项目的顶部？
Posted
技术标签:
【中文标题】Bootstrap 崩溃 - 转到打开项目的顶部？【英文标题】：Bootstrap collapse - go to top of the open item? 【发布时间】：2013-01-16 18:16:26 【问题描述】：我正在使用bootstrap折叠功能，但是当我打开一个内容很多的元素，然后打开下一个元素时，它会向下跳转并且不会到达打开元素的顶部。我已经尝试使用如下所示的 scrollto 插件，但它不起作用：
JS：
$(function()
$('a.accordion-toggle').click(function()
$.scrollTo( this, 500);
)
);
html：
<div class="accordion" id="accordion2">
<div class="accordion-group heading-left-11">
<h5 class="accordion-heading row">
<a class="accordion-toggle span11" data-toggle="collapse" data-parent="#accordion2" href="#collapse1">Austria</a>
<div class="icon-rt span1">
<span class="icn"></span>
</div>
</h5>
<ul id="collapse1" class="member_list accordion-body collapse row">
<li class="accordion-inner pull-left span4">
<a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=101">Filmladen</a>
<span> Michael Stejskal</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=101" title="Filmladen" ><img src="http://dev.europa-distribution.org/assets/logos_film_laden-570x190.png" ></a>
</li>
<li class="accordion-inner pull-left span4">
<a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=194">Polyfilm</a>
<span> Hans Koenig</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=194" title="Polyfilm" ><img src="http://dev.europa-distribution.org/assets/logos_polyfilm-570x190.png" ></a>
</li>
<li class="accordion-inner pull-left span4">
<a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=228">Stadtkino Filmverleih</a>
<span> Claus Philipp</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=228" title="Stadtkino Filmverleih" ><img src="http://dev.europa-distribution.org/assets/logos_stadtkino_filmverleih-570x190.png" ></a>
</li>
</ul>
</div>
<div class="accordion-group heading-left-11">
<h5 class="accordion-heading row">
<a class="accordion-toggle span11" data-toggle="collapse" data-parent="#accordion2" href="#collapse2">Belgium</a>
<div class="icon-rt span1">
<span class="icn"></span>
</div>
</h5>
<ul id="collapse2" class="member_list accordion-body collapse row">
<li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=6">ABC</a><span> Nicolaine Den Breejen</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=6" title="ABC" ><img src="http://dev.europa-distribution.org/assets/logos_genci_kino_abc-570x190.png" ></a></li>
<li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=61">Cineart-Cinelibre</a><span> Eliane du Bois & Stephan de Potter</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=61" title="Cineart-Cinelibre" ><img src="http://dev.europa-distribution.org/assets/logos_cineart-570x190.png" ></a></li>
<li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=127">Imagine Film Distribution</a><span> Christian Thomas & Tinne Bral</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=127" title="Imagine Film Distribution" ><img src="http://dev.europa-distribution.org/assets/logos_imagine-570x190.png" ></a></li>
<li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=214">Le Parc Distribution</a><span> Jean-Pierre Pécasse</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=214" title="Le Parc Distribution" ><img src="http://dev.europa-distribution.org/assets/logos_le_parc-570x190.png" ></a></li>
<li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=145">Lumière</a><span> Jan de Clerq & Annemie Degryse</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=145" title="Lumière" ><img src="http://dev.europa-distribution.org/assets/logos_lumiere-570x190.png" ></a></li>
<li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=383">O’Brother</a><span> Olivier Bronckart</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=383" title="O’Brother" ><img src="http://dev.europa-distribution.org/assets/logos_obrother_distribution-570x190.png" ></a></li>
<li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=185">Paradiso Filmed Entertainment</a><span> Olivier Mortagne</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=185" title="Paradiso Filmed Entertainment" ><img src="http://dev.europa-distribution.org/assets/logos_paradiso-570x190.png" ></a></li>
<li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=529">U-Dream</a><span> Stephanie Van den Berge</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=529" title="U-Dream" ><img src="http://dev.europa-distribution.org/assets/logos_udream-570x190.png" ></a></li>
</ul>
</div>
<div class="accordion-group heading-left-11">
<h5 class="accordion-heading row">
<a class="accordion-toggle span11" data-toggle="collapse" data-parent="#accordion2" href="#collapse3">Bulgaria</a>
<div class="icon-rt span1">
<span class="icn"></span>
</div>
</h5>
<ul id="collapse3" class="member_list accordion-body collapse row">
<li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=337">Artfest</a><span> Stefan Kitanov & Mira Staleva</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=337" title="Artfest" ><img src="http://dev.europa-distribution.org/assets/logos_artfest-570x190.png" ></a></li>
<li class="accordion-inner pull-left span4"><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=302">Pro Films</a><span> Emil Simeonov</span><a href="http://www.cidinet.eu/display_distributor.php?id_target_distributor=302" title="Pro Films" ><img src="http://dev.europa-distribution.org/assets/logos_pro_films-570x190.png" ></a></li>
</ul>
</div>
<div class="accordion-group heading-left-11">
<h5 class="accordion-heading row">
<a class="accordion-toggle span11" data-toggle="collapse" data-parent="#accordion2" href="#collapse4">Canada</a>
<div class="icon-rt span1">
<span class="icn"></span>
</div>
</h5>
<ul id="collapse4" class="member_list accordion-body collapse row">
<li class="accordion-inner pull-left span4">Metropole Films<span> Charles Tremblay</span><img src="http://dev.europa-distribution.org/assets/logos_metropole_film_distribution-570x190.png" ></li>
</ul>
</div>
有什么想法吗？
【问题讨论】：
【参考方案1】：Bootstrap 3 中的事件名称已更改，因此 @bboymaanu's 将无法正常工作。它应该使用 'shown.bs.collapse' 事件。
$(".accordion-body").on("shown.bs.collapse", function ()
var selected = $(this);
var collapseh = $(".collapse.in").height();
$.scrollTo(selected, 500,
offset: -(collapseh)
);
);
新事件是documented here。
【讨论】：
【参考方案2】：我有使用 bootstrap collapse 的滚动条，但代码适用于 WordPress。我引入了你的内容，它有效。 Bootstrap Collapse 有一个显示事件，然后您需要知道要向上滚动的内容的高度。
$(".accordion-body").on("shown", function ()
var selected = $(this);
var collapseh = $(".collapse .in").height();
$.scrollTo(selected, 500,
offset: -(collapseh)
);
);
您可能需要稍微调整一下，但它应该可以工作。
【讨论】：
在动画结束后尝试使用鼠标滚动时，是否有人出现冻结/闪烁效果？【参考方案3】：$(".accordion-body").on("shown", function ()
var id = $(this).attr('id');
$('html, body').animate(scrollTop: $('#'+id).offset().top + -50, 1000);
);
);
简单示例。 “.top + -50”是距元素顶部减 50 像素，允许顶部有一些填充。
【讨论】：
【参考方案4】：这是一个基于其他建议的解决方案：
也适用于嵌入式手风琴 滚动显示标题 仅当屏幕上尚未出现时 动画也是如此代码：
$('#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');
);
【讨论】：
第四行需要是：var actualAccordianId = $('a[href="#' + $(e.target).attr('id') + '"]').data('parent');【参考方案5】：
$('#accordion').on('shown.bs.collapse', function ()
var panel = $(this).find('.in');
$('html, body').animate(
scrollTop: panel.offset().top
, 500);
);
【讨论】：
【参考方案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;
它还提供弹跳效果，我喜欢它。
【讨论】：
以上是关于Bootstrap 崩溃 - 转到打开项目的顶部？的主要内容，如果未能解决你的问题，请参考以下文章
打开 bootstrap.min.css 崩溃 VS2010
无论滚动位置如何，iframe 顶部的引导模式。如何在屏幕上定位它？
Bootstrap手风琴，点击时滚动到活动（打开）手风琴的顶部？