jQuery scrollTop在靴带

Question

你好，当点击#选择器时，我正在使用jQuery试图滚动到#目标div。这两个元素分别位于单独的引导选项卡面板/标签窗格中。

当#目标位于#选择器的父面板/窗格之外时，我似乎无法获得滚动效果。

<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

希望这能有所帮助