Javascript Bootstrap 手风琴，单击时滚动到活动（打开）手风琴的顶部？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35992900/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap accordion, scroll to top of active (open) accordion on click?
提问by user3574766
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 headingbut it scrolls to the top of all the accordions, not the specific one that is open.
我发现这个有用的代码从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);
}
});
});
How can this code be modified to scroll to the top of the currently active accordion?
如何修改此代码以滚动到当前活动的手风琴顶部？
HTML;
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>
回答by Michael Coxon
You can animate the scroll by getting the top of the 'target element' and then calling animate on the body..
您可以通过获取“目标元素”的顶部然后在主体上调用 animate 来为滚动设置动画。
$('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);
});
source: http://www.abeautifulsite.net/smoothly-scroll-to-an-element-without-a-jquery-plugin-2/
来源：http: //www.abeautifulsite.net/smoothly-scroll-to-an-element-without-a-jquery-plugin-2/
complementary fiddle: https://jsfiddle.net/hjugdwbp/
补充小提琴：https: //jsfiddle.net/hjugdwbp/
Edit: 2018-05-25
编辑：2018-05-25
Bootstrap 4 Example
Bootstrap 4 示例
Using the accordion example at: https://getbootstrap.com/docs/4.0/components/collapse/#accordion-exampleI have modified the code to support cards.
使用手风琴示例：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);
});
Fiddle: https://jsfiddle.net/agpkc4v2/1/
小提琴：https: //jsfiddle.net/agpkc4v2/1/
Edit: 2019-07-18
编辑：2019-07-18
I made it 'prettier'...
我让它“更漂亮”...
Bootstrap 3
引导程序 3
https://jsfiddle.net/erutfgvn/
https://jsfiddle.net/erutfgvn/
$('.panel-collapse').on('show.bs.collapse', function(e) {
var $panel = $(this).closest('.panel');
var $open = $(this).closest('.panel-group').find('.panel-collapse.in');
var additionalOffset = 0;
if($panel.prevAll().filter($open.closest('.panel')).length !== 0)
{
additionalOffset = $open.height();
}
$('html,body').animate({
scrollTop: $panel.offset().top - additionalOffset
}, 500);
});
Bootstrap 4
引导程序 4
https://jsfiddle.net/9p7f0hut/
https://jsfiddle.net/9p7f0hut/
$('.collapse').on('show.bs.collapse', function(e) {
var $card = $(this).closest('.card');
var $open = $($(this).data('parent')).find('.collapse.show');
var additionalOffset = 0;
if($card.prevAll().filter($open.closest('.card')).length !== 0)
{
additionalOffset = $open.height();
}
$('html,body').animate({
scrollTop: $card.offset().top - additionalOffset
}, 500);
});
回答by Jerome Fitzpatrick
I am working on a project that needed the same functionality. Came up with the following code. I added the variables for clarification:
我正在开发一个需要相同功能的项目。想出了以下代码。我添加了变量以进行澄清：
$('#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);
}});
