您好,我正在使用 jQuery,试图在单击 #selector 时滚动到 #target div。这两个元素位于单独的 Bootstrap 选项卡面板/选项卡面板中。
当#target 位于#selector 的父面板/ Pane 之外时,我似乎无法获得滚动效果。
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#home" role="tab" data-toggle="tab"></a>
</li>
<li role="presentation">
<a href="#profile" role="tab" data-toggle="tab"></a>
</li>
<li role="presentation">
<a href="#messages" role="tab" data-toggle="tab"></a>
</li>
<li role="presentation">
<a href="#settings" role="tab" data-toggle="tab"></a>
</li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="home">
<div id="selector"></div>
</div>
<div role="tabpanel" class="tab-pane fade" id="profile">
<div id="target"></div>
</div>
<div role="tabpanel" class="tab-pane fade" id="messages">...</div>
<div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>
关于如何在不同的选项卡中实现 scrollTop 效果的任何想法?我是不是迷上了 Bootstrap CSS?替代建议?感谢您的宝贵时间。
这是 JS,第一个函数只是根据所选元素的 href 更改选项卡。
$(document).ready(function() {
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
var target = this.href.split('#');
$('.nav a').filter('a[href="#' + target[1] + '"]').tab('show');
})
$('#selector').click(function(e) {
e.preventDefault();
$('html, body, nav').delay(500).animate({
scrollTop: $("#target").offset().top
}, 500);
});
});
最佳答案
使用 .closest (获取父项)获取放置 #target
div 的选项卡。然后打开那个标签。然后使用动画滚动到顶部。
我没有使用 .delay()
,而是使用了 setTimeout,因为动画会在选项卡打开之前发生,这不是必需的。
$(document).ready(function() {
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
var target = this.href.split('#');
showTab(target[1]);
});
$('#selector').click(function(e) {
e.preventDefault();
var target = $('#target').closest('.tab-pane').attr('id');
showTab(target);
setTimeout(function() {
$('html, body, nav').animate({
scrollTop: $("#target").offset().top
}, 500);
}, 500);
});
});
function showTab(target) {
$('.nav a').filter('a[href="#' + target + '"]').tab('show');
}
这是一个演示 http://jsbin.com/xomafe/edit?html,js,output
希望对你有帮助
关于javascript - Bootstrap 中的 jQuery scrollTop,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31394099/