title: Scrolling Down to Bootstrap Tab using "data-toggle"
body: <p>I'm having trouble getting scrolling to work properly to a specific anchor that is also a bootstrap tab.  Here's the project:</p>
  
  <p>When the page loads, the active tab "Discover", works absolutely fine.  It's scrolls to the proper height as it should however, when you click on the second tab, for some reason it decides to scroll up.  Once that new tab "share" is active, you can then click on it and it scrolls to the proper height without an issue.  This continues for the rest of the tabs.  Here's the jquery:</p>
  
  <pre><code> jQuery(document).ready(function ($) {
  
       $('.nav a').click(function (e) {
           e.preventDefault();
           $(this).tab('show')
       })$('a.scroll').on('click', function (e) {
           e.preventDefault();
           var href = $(this).attr('href');
           $('html, body').stop().animate({
              scrollTop: $(href).position().top - 280
           }, 'slow');
        });  
  });   
  </code></pre>
  
  <p>each one of the links has the following class:
      <code>&lt;a href="#discover" data-toggle="tab" class="scroll"&gt;</code></p>
  
  <p>I can not figure out what is going on.  Any feedback would be helpful.  Thanks in advance.</p>