我有一个“步骤”系统,人们可以在其中单击一个按钮以继续下一步。问题是当内容真的很长时,页面停留在“下面”,然后人们必须向上滚动才能看到下一个选项卡的内容,然后向下滚动才能再次继续下一步。
有没有一种简单的方法让它跳转到像#
这样的页面 anchor ?并备份到 <h4 class="list-group-item-heading">Step 2</h4>
什么时候激活新标签?这是 jQuery:
$(document).ready(function() {
var navListItems = $('ul.setup-panel li a'),
allWells = $('.setup-content');
allWells.hide();
navListItems.click(function(e)
{
e.preventDefault();
var $target = $($(this).attr('href')),
$item = $(this).closest('li');
if (!$item.hasClass('disabled')) {
navListItems.closest('li').removeClass('active');
$item.addClass('active');
allWells.hide();
$target.show();
}
});
$('ul.setup-panel li.active a').trigger('click');
// DEMO ONLY //
$('#activate-step-2').on('click', function(e) {
$('ul.setup-panel li:eq(1)').removeClass('disabled');
$('ul.setup-panel li a[href="#step-2"]').trigger('click');
$(this).remove();
})
// DEMO ONLY //
$('#activate-step-3').on('click', function(e) {
$('ul.setup-panel li:eq(2)').removeClass('disabled');
$('ul.setup-panel li a[href="#step-3"]').trigger('click');
$(this).remove();
})
});
还有一个 jsFiddle:http://jsfiddle.net/asy4267m/1/
我试着做类似 $('.list-group-item-heading').focus();
的事情但这没有用。
请注意,如果浏览器窗口不是全尺寸并且因此强制滚动,则它显然效果最好。
最佳答案
你可以使用 animate 和 scrollTop 来移动你喜欢的 ID
$('html, body').animate({
scrollTop: $("#YourDiv").offset().top
}, 2000);
关于javascript - Bootstrap Nav Pills Steps ...如何使浏览器在点击时跳转到页面顶部?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30680277/