Question

我有一个＆＃34;步骤＆＃34;系统，人们可以点击按钮继续下一步。问题是，当内容真的很长时，页面就会停留在那里＆＃34;然后人们必须向上滚动才能看到下一个标签的内容并返回以再次进入下一步。

有一种简单的方法可以让它跳转到#之类的页面锚点，并在激活新标签时返回到<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);

Bootstrap Navpills Steps ...如何让浏览器在点击时跳转到页面顶部？

1 个答案: