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

我已经更新了你的小提琴，现在工作正常

<强> 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();
  });

});

Answer 2

我用这个：

// scroll to top action
$('.nav-tabs li a').on('click', function(event) {
    event.preventDefault();
    $('html, body').animate({scrollTop:0}, 'fast'); 
    $(this).tab('show');    
});

单击时，Bootstrap选项卡会将效果滚动到内容

2 个答案: