javascript - Bootstrap 中的 jQuery scrollTop

Question

您好，我正在使用 jQuery，试图在单击 #selector 时滚动到 #target div。这两个元素位于单独的 Bootstrap 选项卡面板/选项卡面板中。

当#target 位于#selector 的父面板/ Pane 之外时，我似乎无法获得滚动效果。

<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active">
    <a href="#home" role="tab" data-toggle="tab"></a>
  </li>
  <li role="presentation">
    <a href="#profile" role="tab" data-toggle="tab"></a>
  </li>
  <li role="presentation">
    <a href="#messages" role="tab" data-toggle="tab"></a>
  </li>
  <li role="presentation">
    <a href="#settings" role="tab" data-toggle="tab"></a>
  </li>
</ul>

<div class="tab-content">

  <div role="tabpanel" class="tab-pane fade in active" id="home">
    <div id="selector"></div>
  </div>

  <div role="tabpanel" class="tab-pane fade" id="profile">
    <div id="target"></div>
  </div>

  <div role="tabpanel" class="tab-pane fade" id="messages">...</div>

  <div role="tabpanel" class="tab-pane fade" id="settings">...</div>
</div>

关于如何在不同的选项卡中实现 scrollTop 效果的任何想法？我是不是迷上了 Bootstrap CSS？替代建议？感谢您的宝贵时间。

这是 JS，第一个函数只是根据所选元素的 href 更改选项卡。

$(document).ready(function() {
  $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    var target = this.href.split('#');
    $('.nav a').filter('a[href="#' + target[1] + '"]').tab('show');
  })
  $('#selector').click(function(e) {
    e.preventDefault();
    $('html, body, nav').delay(500).animate({
      scrollTop: $("#target").offset().top
    }, 500);
  });
});

Answer 1

使用 .closest (获取父项)获取放置 #target div 的选项卡。然后打开那个标签。然后使用动画滚动到顶部。

我没有使用 .delay()，而是使用了 setTimeout，因为动画会在选项卡打开之前发生，这不是必需的。

$(document).ready(function() {
  $('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
    var target = this.href.split('#');
    showTab(target[1]);
  });
  $('#selector').click(function(e) {
    e.preventDefault();
    var target = $('#target').closest('.tab-pane').attr('id');
    showTab(target);
    setTimeout(function() {
      $('html, body, nav').animate({
        scrollTop: $("#target").offset().top
      }, 500);
    }, 500);
  });
});

function showTab(target) {
  $('.nav a').filter('a[href="#' + target + '"]').tab('show');
}

这是一个演示 http://jsbin.com/xomafe/edit?html,js,output

希望对你有帮助