title: Twitter Bootstrap Tabs Jump to Top when changing Tab
body: <p>I have 4 tabs. With different heights, and on top of the tabs I have a Row.</p>
  
  <p>As in this <a href="https://jsfiddle.net/mdawood1991/8sdov3hu/" rel="nofollow">JSFiddle</a>.</p>
  
  <p>The problem I am having is that the page jumps to the Top when changing from a tab with greater height to a tab with less height.</p>
  
  <p>I am using Bootstrap Tabs.</p>
  
  <p>I have tried removing the <code>data-toggle="tab"</code> from</p>
  
  <pre><code>&lt;li&gt;&lt;a href="#caseTab" data-toggle="tab"&gt;Case&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>To </p>
  
  <pre><code>&lt;li&gt;&lt;a href="#caseTab"&gt;Case&lt;/a&gt;&lt;/li&gt;
  </code></pre>
  
  <p>And loading the Tab using jQuery:</p>
  
  <pre><code>$('.nav-tabs li a').click(function (e) {
          e.preventDefault();
          $(this).tab('show');
          return false;
      });
  </code></pre>
  
  <p>And also tried to return false according to Suggestions Online of <code>return false;</code></p>
  
  <p><a href="https://forum.jquery.com/topic/jquery-tabs-page-jumps-to-top-when-tab-changes" rel="nofollow">Here</a>:</p>
  
  <p>Could someone help me fix this?</p>