Question

I have the following HTML markup, which is just three tabs which when clicked, display pre-loaded text in a div on the page,

    <a class="page" id="tab1">This is tab!</a> 
    <a class="page" id="tab2">This is tab 2!</a> 
    <a class="page" id="tab3">This is tab3!</a> 

This jQuery simply hides or shows text when one of the tabs are clicked,

$(document).ready(function() { 
   $(".page").hide(); 
   $("#tab1").show(); 
}); 
$(".page").click(function() { 
   var id = $(this).attr("href"); 
   $(".page").hide();
   $(id).show(); 
});

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?

Answer 1

To prevent the page scroll on click (following anchor hash) use: Event.preventDefault()

$(".page").click(function( evt ) {

   evt.preventDefault();       // prevents browser's default anchor behavior

   // Other code here....
   $(".page").hide();            // HIDE ALL     .page
   $("."+ this.id ).show();      // SHOW RELATED .(id)
});