ブートストラップタブ - 次と前へ

Question

ブートストラップタブに問題があります。

次のボタンで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> 

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> 

Answer 1

この特定のコードが原因となっています問題（Skellyのアプローチを取る）

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

上記のコードがスキップジャンプを引き起こす理由を見つけることができません。しかし、私はこれを解決する解決策を持っています。

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'); 
}); 

P.S - 誰もが理由彼のコードが機能しなかった理由を説明することができる場合、私は平和に死ぬことができるようになります。

WORKING BOOTPLY