[英]Bootstrap accordion, scroll to top of active (open) accordion on click?
我正在使用 Bootstrap 制作一个响应式网站,它包含带有大量文本的手风琴,当您阅读到底部并单击下一个手风琴时,大量文本被折叠,我留在页面底部.
我从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);
}
});
});
如何修改此代码以滚动到当前活动的手风琴的顶部?
<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>
您可以通过获取“目标元素”的顶部然后在主体上调用 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({
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我修改了代码以支持卡片。
$('.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/
编辑:2019-07-18
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);
});
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
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);
});
我正在开发一个需要相同功能的项目。 想出了以下代码。 我添加了变量以进行澄清:
$('#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);
}});
2021 年更新
从Bootstrap 5 开始,不再需要 jQuery。 这是滚动到打开的手风琴项目顶部的香草JavaScript解决方案......
const accordionItems = document.querySelectorAll('.accordion-collapse')
const acc = document.getElementById('accordionExample')
accordionItems.forEach((el)=>{
el.addEventListener('shown.bs.collapse',(e)=>{
var scrollOffset = acc.scrollTop + el.parentNode.offsetTop
acc.scroll({
top: scrollOffset,
left: 0,
behavior: 'smooth'
})
})
})
$('.accordion-button').on("click",function(event){
var accordion = $(this).parent().parent().parent();
window.setTimeout(function(){
$('body,html').stop().animate({ scrollTop: accordion[0].scrollHeight}, 1000);
},100)
}
这里有香草 Javascript。
在为具有手风琴折叠class 的元素提供唯一 ID (collapse-{{uniqueId}}) 之后:
let accordionItemsToBeFocused = document.querySelectorAll("[id^=collapse-]");
accordionItemsToBeFocused.forEach((el)=>{
el.addEventListener('shown.bs.collapse',(e)=>{
window.location.href = '#' + el.id
})
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.