javascript - Bootstrap Nav Pills Steps ...如何使浏览器在点击时跳转到页面顶部？

Question

我有一个“步骤”系统，人们可以在其中单击一个按钮以继续下一步。问题是当内容真的很长时，页面停留在“下面”，然后人们必须向上滚动才能看到下一个选项卡的内容，然后向下滚动才能再次继续下一步。

有没有一种简单的方法让它跳转到像#这样的页面 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(); 的事情但这没有用。

请注意，如果浏览器窗口不是全尺寸并且因此强制滚动，则它显然效果最好。

Answer 1

你可以使用 animate 和 scrollTop 来移动你喜欢的 ID

$('html, body').animate({
        scrollTop: $("#YourDiv").offset().top
    }, 2000);