desactivar el desplazamiento Al hacer clic en un enlace

Question

Tengo el siguiente marcado HTML, que está a sólo tres pestañas, que cuando se hace clic, para mostrar un texto pre-cargado en un div en la página,

<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> 

Este jQuery simplemente los cueros, muestra de texto cuando se hace clic en una de las fichas,

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

Sin embargo, si hay desbordamiento de la página (es decir, la página es desplazable) cuando hago clic en una de las fichas, la página se desplaza automáticamente para centrar el div de la ventana gráfica. ¿Cómo evito que esto ocurra?

Answer 1

Para evitar que el desplazamiento página en clic (después del anclaje de hash) utilizar: 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) 
}); 

Answer 2

<a href="#" class="page" id="tab1" onclick="return false;">This is tab!</a> 

Agregue return false a todas sus anclas.

Answer 3

Este es el comportamiento por defecto para los enlaces con hash. Lo que se quiere es evitar que el comportamiento del navegador por defecto, por lo que debe utilizar el método de event.preventDefault

$(".page").click(function(event) { 
    var $el = $(this), id = $el.attr("href"); 
    $(".page").hide(); 
    $el.show(); 
    event.preventDefault(); 
});