title: Bootstrap tabs scroll effect to content when clicked
body: <p>I am using Bootstrap 3 Tabs like this:</p>
  
  <pre><code>&lt;ul class="nav nav-pills nav-justified"&gt;
     &lt;li&gt;&lt;a href="#tab-1t" data-toggle="tab"&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li class="active"&gt;&lt;a href="#tab-2" data-toggle="tab"&gt;&lt;/a&gt;&lt;/li&gt;
     &lt;li&gt;&lt;a href="#tab-3" data-toggle="tab"&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Because the tab content gets quite long i want to add a scrolling effect that centers the tab content.</p>
  
  <p>I am using this snippet for other scroll-effects on the site:</p>
  
  <pre><code>$('a.scroll').on('click', function(e){
  var href = $(this).attr('href');
  $('html, body').animate({
  scrollTop:$(href).offset().top
  },'slow');
  e.preventDefault();
  });
  </code></pre>
  
  <p>When i add the "scroll" class to the tab links i get the desired effect but only on already active tabs. With inactive tabs it requires two clicks. </p>
  
  <p>What should i change?</p>
  
  <p>UPDATE:</p>
  
  <p><a href="http://jsfiddle.net/t5Wk6/2/" rel="nofollow">JSFIDDLE</a></p>