Javascript 引导选项卡-下一个和上一个

我的引导选项卡有问题

我在“下一步”按钮上定义了一个

scrollTop

函数。滚动工作正常，但选项卡从1跳到3

我的JS代码：

<script>

$('.btnNext').click(function(){

     $('html, body').animate({
        scrollTop: jQuery(".expect").offset().top
    }, 800,

    function () {
          $('.nav-tabs > .active').next('li').find('a').trigger('click');
    }
);

});

  $('.btnPrevious').click(function(){
  $('.nav-tabs > .active').prev('li').find('a').trigger('click');
});

</script>

$（'.btnNext'）。单击（函数（）{
$（'html，body'）。设置动画({
scrollTop:jQuery（“.expect”）.offset（）.top
}, 800,
函数（）{
$（'.nav tabs>.active'）。下一步（'li'）。查找（'a'）。触发（'click'）；
}
);
});
$（'.btnprevous'）。单击（函数（）{
$（'.nav tabs>.active'）.prev（'li'）.find（'a'）.trigger（'click'）；
});

HTML代码：

<div class="step-tabs">
    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item active" style="padding:3px;">
            <a class="nav-link" data-toggle="tab" href="#tab1" role="tab">STAP 01</a>
        </li>
        <li class="nav-item" style="padding:3px;">
            <a class="nav-link" data-toggle="tab" href="#tab2" role="tab">STAP 02</a>
        </li>
        <li class="nav-item" style="padding:3px;">
            <a class="nav-link" data-toggle="tab" href="#tab3" role="tab">STAP 03</a>
        </li>
        <li class="nav-item" style="padding:3px;">
            <a class="nav-link" data-toggle="tab" href="#tab5" role="tab">STAP 03</a>
        </li>
        <li class="nav-item" style="padding:3px;">
            <a class="nav-link" data-toggle="tab" href="#tab5" role="tab">STAP 03</a>
        </li>
        <li class="nav-item" style="padding:3px;">
            <a class="nav-link" data-toggle="tab" href="#tab6" role="tab">STAP 03</a>
        </li>
    </ul>
</div>
<div class="step-panes">
    <!-- Tab panes -->
    <div class="tab-content">
        <div class="tab-pane active" id="tab1" role="tabpanel">
            <p>CONTENT TABS 01<br><br><br><br><br><br><br><br><br><br>XXXXXX<br><br><br><br><br><br><br>XXXXXXX<br><br><br><br><br><br><br></p><a class="btn btn-primary btnNext">Next</a>
        </div>
        <div class="tab-pane" id="tab2" role="tabpanel">
            <p>CONTENT TABS 01<br><br><br><br><br><br><br><br><br><br>XXXXXX<br><br><br><br><br><br><br></p><a class="btn btn-primary btnNext">Next</a> <a class="btn btn-primary btnPrevious">Previous</a>
        </div>
        <div class="tab-pane" id="tab3" role="tabpanel">
            <p>CONTENT TABS 03</p><a class="btn btn-primary btnNext">Next</a> <a class="btn btn-primary btnPrevious">Previous</a>
        </div>
        <div class="tab-pane" id="tab4" role="tabpanel">
            <p>CONTENT TABS 03</p><a class="btn btn-primary btnNext">Next</a> <a class="btn btn-primary btnPrevious">Previous</a>
        </div>
        <div class="tab-pane" id="tab5" role="tabpanel">
            <p>CONTENT TABS 03</p><a class="btn btn-primary btnNext">Next</a> <a class="btn btn-primary btnPrevious">Previous</a>
        </div>
        <div class="tab-pane" id="tab6" role="tabpanel">
            <p>CONTENT TABS 03</p><a class="btn btn-primary btnNext">Next</a> <a class="btn btn-primary btnPrevious">Previous</a>
        </div>
    </div>
</div>

内容选项卡01






下一步
内容选项卡01









XXXXXX






下一个上一个
内容选项卡03
下一个上一个
内容选项卡03
下一个上一个
内容选项卡03
下一个上一个
内容选项卡03
下一个上一个

这个特定的代码导致了问题（采用Skelly的方法）

我找不到上述代码导致跳转的原因。但我确实有解决这个问题的办法

JS

$(document).ready(function() {
    $('.step-tabs').on('click', function() {
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 800);
    });
});


$('.btnNext').click(function() {
    $('.nav-tabs > .active').next('li').find('a').trigger('click');
});


$('.btnPrevious').click(function() {
    $('.nav-tabs > .active').prev('li').find('a').trigger('click');
});

另外，如果有人能解释他的代码不起作用的原因，我就可以安详地死去

---

Live：尝试删除部分代码，直到确定问题的原因。谢谢。代码实际上正在工作，但是否有一种解决方案，仅当scrollTop完成时才显示下一个选项卡？

$(document).ready(function() {
    $('.step-tabs').on('click', function() {
        $('html,body').animate({
            scrollTop: $(this).offset().top
        }, 800);
    });
});


$('.btnNext').click(function() {
    $('.nav-tabs > .active').next('li').find('a').trigger('click');
});


$('.btnPrevious').click(function() {
    $('.nav-tabs > .active').prev('li').find('a').trigger('click');
});