我正在使用 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);
});
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').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);
}});
$('.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)
}
当用户单击手风琴箭头按钮时，上面的代码中会发生以下步骤：-
1.将 Accordion 变量设置为 Accordion 按钮的类为“.accordion”的父节点。
2.accordion[0].scrollHeight - 查找打开的手风琴的滚动高度。
3.使用scrollTop的动画选项，页面移动到手风琴的滚动高度。
4.为了确保在手风琴打开后完成步骤 2 和 3，setTimeout 函数用于在手风琴打开后对代码进行计时。如果您的情况下手风琴主体较长，那么您可以相应地更改该值。目前上面代码中的值是 100。
这里使用 Vanilla Javascript。
为具有 accordion-collapse 类的元素提供唯一 id (collapse-{{uniqueId}}) 后：
let accordionItemsToBeFocused = document.querySelectorAll("[id^=collapse-]");
accordionItemsToBeFocused.forEach((el)=>{
el.addEventListener('shown.bs.collapse',(e)=>{
window.location.href = '#' + el.id
})
})
let accordionItemsToBeFocused = document.querySelectorAll("[id^=collapse-]");
accordionItemsToBeFocused.forEach((el)=>{
el.addEventListener('shown.bs.collapse',(e)=>{
document.querySelector('#'+ el.id).scrollIntoView({ behavior: 'smooth' }
})
})