jquery - 单击时 Bootstrap 选项卡滚动到内容

Question

我正在使用 Bootstrap 3 选项卡，如下所示:

<ul class="nav nav-pills nav-justified">
   <li><a href="#tab-1t" data-toggle="tab"></a></li>
   <li class="active"><a href="#tab-2" data-toggle="tab"></a></li>
   <li><a href="#tab-3" data-toggle="tab"></a></li>
</ul>

因为选项卡内容变得很长，我想添加一个使选项卡内容居中的滚动效果。

我将此代码片段用于网站上的其他滚动效果:

$('a.scroll').on('click', function(e){
var href = $(this).attr('href');
$('html, body').animate({
scrollTop:$(href).offset().top
},'slow');
e.preventDefault();
});

当我将“滚动”类添加到选项卡链接时，我得到了所需的效果，但仅限于已经事件的选项卡。对于非事件选项卡，需要单击两次。

我应该改变什么？

更新:

JSFIDDLE

Answer 1

我已经更新了你的 fiddle ，现在工作正常

<强> Working Demo

jQuery

jQuery(document).ready(function ($) {

  $('.nav a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
  })  

  $('a.scroll').on('click', function (e) {
    var href = $(this).attr('href');
    $('html, body').animate({
      scrollTop: $(href).offset().top
      }, 'slow');
    e.preventDefault();
  });

});