title: Disable Scrolling When Clicking on a Link
body: <p>I have the following HTML markup, which is just three tabs which when clicked, display pre-loaded text in a div on the page, </p>
  
  <pre><code>    &lt;a class="page" id="tab1"&gt;This is tab!&lt;/a&gt; 
      &lt;a class="page" id="tab2"&gt;This is tab 2!&lt;/a&gt; 
      &lt;a class="page" id="tab3"&gt;This is tab3!&lt;/a&gt; 
  </code></pre>
  
  <p>This jQuery simply hides or shows text when one of the tabs are clicked, </p>
  
  <pre><code>$(document).ready(function() { 
     $(".page").hide(); 
     $("#tab1").show(); 
  }); 
  $(".page").click(function() { 
     var id = $(this).attr("href"); 
     $(".page").hide();
     $(id).show(); 
  });
  </code></pre>
  
  <p>However, if there is page overflow (i.e. the page is scrollable) when I click on one of the tabs, the page auto-scrolls to center the div in the viewport. How do I prevent this from occurring? </p>