我正在寻找一个代码,它可以向上滚动到我的 bootstrap 3 html/css 手风琴当前活动面板标题的顶部。我在 stackoverflow 上找到的最接近的解决方案是下面的 js 片段。
此代码片段运行良好,但是当单击面板标题时,页面会滚动,使面板内容的最顶部与屏幕顶部齐平。有没有办法修改它,以便滚动效果导致面板“标题”(而不是面板内容区域的顶部)在屏幕顶部可见?
$(function () {
$('#accordion').on('shown.bs.collapse', function (e) {
var offset = $('.panel.panel-default > .panel-collapse.in').offset();
if(offset)$('html,body').scrollTop(offset.top); }); });
如果我也应该共享 bootstrap accordion html,请告诉我。
我用过这个,它工作正常你可以在 .offset().top 之后调整 -20 如果你需要稍微向上或向下调整它。
$(function () {
$('#accordion').on('shown.bs.collapse', function (e) {
var offset = $('.panel.panel-default > .panel-collapse.in').offset();
if(offset) {
$('html,body').animate({
scrollTop: $('.panel-title a').offset().top -20
}, 500);
}
});
});
这是针对根据 James Wilson 对已接受答案的评论点击的特定 .panel-heading。
$(function () {
$('#accordion').on('shown.bs.collapse', function (e) {
var offset = $(this).find('.collapse.in').prev('.panel-heading');
if(offset) {
$('html,body').animate({
scrollTop: $(offset).offset().top -20
}, 500);
}
});
});
我对 gigelsmith 接受的答案所做的更改是“var offset”和 scrollTop 的目标。
我无法得到上面的答案,也许我遗漏了一些东西,但我看不到上面的 scrollTop 行与当前打开的手风琴项目有何关系,因此改用以下代码。希望它能帮助别人:
$(function () {
$('#accordion').on('shown.bs.collapse', function (e) {
var offset = $('.panel.panel-default > .panel-collapse.in').offset();
if(offset) {
$('html,body').animate({
scrollTop: $('.panel-collapse.in').siblings('.panel-heading').offset().top
}, 500);
}
});
});
总是动画看起来有点太多所以这是我的版本,只在标题超过可见部分时才完成工作。 (请注意,我使用
data-accordion-focus
来应用修复)
$('[data-accordion-focus]').on('shown.bs.collapse', function (e) {
var headingTop = $(e.target).prev('.panel-heading').offset().top - 5;
var visibleTop = $(window).scrollTop();
if (headingTop < visibleTop) {
$('html,body').animate({
scrollTop: headingTop
}, 500);
}
});
通过使用
.panel-default
作为.on()
的选择器,您可以滚动到活动面板。
$('#accordion').on('shown.bs.collapse', '.panel-default', function (e) {
$('html,body').animate({
scrollTop: $(this).offset().top
}, 500);
});