Bootstrap手风琴，点击活动（开放）手风琴顶部滚动？ [英] Bootstrap accordion, scroll to top of active (open) accordion on click?
问题描述
我正在使用Bootstrap创建一个响应式网站，它包含带有大量文本的手风琴，当您读到底部并单击下一个手风琴时，大量文本被折叠，我被留在底部页面。
I'm making a responsive site using Bootstrap and it contains accordions with a large amount of text, when you read to the bottom and click the next accordion, the large amount of text is collapsed and I'm left at the bottom of the page.
我发现这个有用的代码来自 Bootstrap手风琴滚动到活动面板标题的顶部但它滚动到所有手风琴的顶部，而不是特定的手风琴。
I found this useful code from Bootstrap accordion scroll to top of active panel heading but it scrolls to the top of all the accordions, not the specific one that is open.
$(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);
}
});
});
如何修改此代码以滚动到当前活动手风琴的顶部？
How can this code be modified to scroll to the top of the currently active accordion?
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>
推荐答案
您可以通过获取顶部的动画来设置滚动动画'target element'然后在body上调用animate ..
You can animate the scroll by getting the top of the 'target element' and then calling animate on the body..
$('html, body').animate({
scrollTop: $("#target-element").offset().top
}, 1000);
将其修改为类似的内容将有助于您实现目标
modifying it to be something like this will help you achieve what you are after
$('.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
使用手风琴示例： https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example
我修改了代码以支持卡片。
Using the accordion example at: https://getbootstrap.com/docs/4.0/components/collapse/#accordion-example I have modified the code to support cards.
$('.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/
这篇关于Bootstrap手风琴，点击活动（开放）手风琴顶部滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
