- 首页
- 前端开发
- Bootstrap 手风琴，单击时滚动到活动(打开)手风琴的顶部?
Bootstrap 手风琴，单击时滚动到活动(打开)手风琴的顶部?
[英] Bootstrap accordion, scroll to top of active (open) accordion on click?
本文介绍了Bootstrap 手风琴，单击时滚动到活动(打开)手风琴的顶部?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用 Bootstrap 制作一个响应式网站，它包含带有大量文本的手风琴，当您阅读到底部并单击下一个手风琴时，大量文本被折叠起来，我留在底部页面.
我从 Bootstrap 手风琴滚动到顶部找到了这个有用的代码活动面板标题，但它滚动到所有手风琴的顶部，而不是打开的特定手风琴.
JS
$(function () {$('#accordion').on('shown.bs.collapse', function (e) {var offset = $('.panel.panel-default >.panel-collapse.in').offset();如果(偏移){$('html,body').animate({scrollTop: $('.panel-heading').offset().top -20}, 500);}});});
如何修改这段代码以滚动到当前活动的手风琴顶部?
HTML
<div class="panel panel-default"><a data-toggle="collapse";数据父=#accordion"；href="#collapse1"><div class="panel-heading custom-padding"><h4 class="panel-title text-uppercase">简短概要<i class="fa fa-chevron-down pull-right"></i></h4>
</a><div id="collapse1";class=面板折叠折叠"><div class="panel-body"><p id=游戏套牌"></p>
<div class="panel panel-default"><a data-toggle="collapse";数据父=#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>
</a><div id="collapse2";class=面板折叠折叠"><div class="panel-body"><ul class="whatever";id=游戏概念"></ul>
<div class="panel panel-default"><a data-toggle="collapse";数据父=#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>
</a><div id="collapse3";class=面板折叠折叠"><div class="panel-body";id=游戏主题"></div>
<div class="panel panel-default"><a data-toggle="collapse";数据父=#accordion"；href="#collapse4"><div class="panel-heading custom-padding"><h4 class="panel-title text-uppercase">显着位置<i class="fa fa-chevron-down pull-right"></i></h4>
</a><div id="collapse4";class=面板折叠折叠"><div class="panel-body";id=游戏位置"></div>
<div class="panel panel-default"><a data-toggle="collapse";数据父=#accordion"；href="#collapse5"><div class="panel-heading custom-padding"><h4 class="panel-title text-uppercase">显着字符<i class="fa fa-chevron-down pull-right"></i></h4>
</a><div id="collapse5";class=面板折叠折叠"><div class="panel-body";id="game-characters"></div>
<div class="panel panel-default"><a data-toggle="collapse";数据父=#accordion"；href="#collapse6"><div class="panel-heading custom-padding"><h4 class="panel-title text-uppercase">完整描述<i class="fa fa-chevron-down pull-right"></i></h4>
</a><div id="collapse6";class=面板折叠折叠"><div class="panel-body";id=游戏描述"></div>
解决方案
您可以通过获取目标元素"的顶部然后在主体上调用 animate 来为滚动设置动画..
$('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({滚动顶部:$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
引导程序 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({滚动顶部:$card.offset().top}, 500);});
小提琴:https://jsfiddle.net/agpkc4v2/1/
2019-07-18
我让它更漂亮"了...
引导程序 3
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);});
引导程序 4
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);});
2021-04-20
引导程序 5
https://jsfiddle.net/hLzg0n2y/2/
$('.collapse').on('shown.bs.collapse', function(e) {var $card = $(this).closest('.accordion-item');var $open = $($(this).data('parent')).find('.collapse.show');var additionalOffset = 0;if($card.prevAll().filter($open.closest('.accordion-item')).length !== 0){additionalOffset = $open.height();}$('html,body').animate({scrollTop: $card.offset().top - additionalOffset}, 500);});
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.
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.
JS
$(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>
</div>
解决方案
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);
});
source: http://www.abeautifulsite.net/smoothly-scroll-to-an-element-without-a-jquery-plugin-2/
complementary fiddle: https://jsfiddle.net/hjugdwbp/
Edit: 2018-05-25
Bootstrap 4 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);
});
Fiddle: https://jsfiddle.net/agpkc4v2/1/
Edit: 2019-07-18
I made it 'prettier'...
Bootstrap 3
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
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);
});
Edit: 2021-04-20
Bootstrap 5
https://jsfiddle.net/hLzg0n2y/2/
$('.collapse').on('shown.bs.collapse', function(e) {
var $card = $(this).closest('.accordion-item');
var $open = $($(this).data('parent')).find('.collapse.show');
var additionalOffset = 0;
if($card.prevAll().filter($open.closest('.accordion-item')).length !== 0)
{
additionalOffset = $open.height();
}
$('html,body').animate({
scrollTop: $card.offset().top - additionalOffset
}, 500);
});
这篇关于Bootstrap 手风琴，单击时滚动到活动(打开)手风琴的顶部?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
