¿Cómo evito que una página web se desplace hacia arriba cuando se hace clic en un enlace que activa JavaScript?

Es fundamental interpretar el código correctamente previamente a adaptarlo a tu proyecto si tdeseas aportar algo puedes dejarlo en los comentarios.

Solución:

Debe evitar que se produzca la acción predeterminada para el evento de clic (es decir, navegar hasta el destino del enlace).

Hay dos maneras de hacer esto.

Opción 1: event.preventDefault()

Llama a .preventDefault() método del objeto de evento pasado a su controlador. Si está utilizando jQuery para vincular sus controladores, ese evento será una instancia de jQuery.Event y será la versión jQuery de .preventDefault(). si estás usando addEventListener para vincular a sus controladores, será un Event y la versión DOM sin procesar de .preventDefault(). De cualquier manera hará lo que necesita.

Ejemplos:

$('#ma_link').click(function($e) 
    $e.preventDefault();
    doSomething();
);

document.getElementById('#ma_link').addEventListener('click', function (e) 
    e.preventDefault();
    doSomething();
)

Opcion 2: return false;

En jQuery:

regresando false desde un controlador de eventos llamará automáticamente a event.stopPropagation() y event.preventDefault()

Entonces, con jQuery, puede usar alternativamente este enfoque para evitar el comportamiento predeterminado del enlace:

$('#ma_link').click(function(e) 
     doSomething();
     return false;
);

Si está utilizando eventos DOM sin formato, esto también funcionará en los navegadores modernos, ya que la especificación HTML 5 dicta este comportamiento. Sin embargo, las versiones anteriores de la especificación no lo hicieron, por lo que si necesita la máxima compatibilidad con navegadores antiguos, debe llamar .preventDefault() explícitamente. Ver event.preventDefault() frente a devolución false (sin jQuery) para el detalle de la especificación.

Puede configurar su href para #! en lugar de #

Por ejemplo,

Link

no se desplazará cuando se haga clic.

¡Tener cuidado! Esto aún agregará una entrada al historial del navegador cuando se haga clic, lo que significa que después de hacer clic en su enlace, el botón Atrás del usuario no lo llevará a la página en la que estaba anteriormente. Por esta razón, probablemente sea mejor usar el .preventDefault() enfoque, o usar ambos en combinación.

Aquí hay un violín que ilustra esto (simplemente arrugue su navegador hacia abajo hasta que obtenga una barra de desplazamiento):
http://jsfiddle.net/9dEG7/

---

Para los nerds de las especificaciones, por qué esto funciona:

Este comportamiento se especifica en la especificación de HTML5 en la sección Navegación a un identificador de fragmento. La razón por la que un enlace con un href de "#" hace que el documento se desplace hacia la parte superior es que este comportamiento se especifica explícitamente como la forma de manejar un identificador de fragmento vacío:

2. Si fragid es el vacío stringentonces la parte indicada del documento es la parte superior del documento

Usando un href de "#!" en cambio, funciona simplemente porque evita esta regla. El signo de exclamación no tiene nada de mágico: simplemente sirve como un identificador de fragmento conveniente porque es notablemente diferente a un fragid típico y es poco probable que alguna vez coincida con el id o name de un elemento en su página. De hecho, podríamos poner casi cualquier cosa después del hash; las únicas fragilidades que no bastarán son las vacías stringla palabra ‘superior’ o cadenas que coincidan name o id attributes de elementos en la página.

Más exactamente, solo necesitamos un identificador de fragmento que nos lleve al paso 8 en el siguiente algoritmo para determinar el parte indicada del documento de lo frágil:

1. Aplique el algoritmo del analizador de URL a la URL y deje frágil ser el componente de fragmento de la URL analizada resultante.

2. Si fragid es el vacío string, entonces la parte indicada del documento es la parte superior del documento; detener el algoritmo aquí.

3. Dejar fragid bytes ser el resultado de la decodificación porcentual fragid.

4. Dejar decoded fragid ser el resultado de aplicar el algoritmo del decodificador UTF-8 a fragid bytes. Si el decodificador UTF-8 emite un error de decodificador, anule el decodificador y, en su lugar, salte al paso etiquetado no decoded fragid.

5. Si hay un elemento en el DOM que tiene una ID exactamente igual a decoded fragid, entonces el primer elemento de este tipo en orden de árbol es la parte indicada del documento; detener el algoritmo aquí.

6. No descifrado frágil: si hay un elemento en el DOM que tiene un nombre attribute cuyo valor es exactamente igual a fragid (no decoded fragid), entonces el primer elemento de este tipo en orden de árbol es la parte indicada del documento; detener el algoritmo aquí.

7. Si frágil es una coincidencia ASCII que no distingue entre mayúsculas y minúsculas para el string top, entonces la parte indicada del documento es la parte superior del documento; detener el algoritmo aquí.

8. De lo contrario, no hay ninguna parte indicada del documento.

Mientras lleguemos al paso 8 y no hay ninguna parte indicada del documentoentra en juego la siguiente regla:

Si no hay una parte indicada… entonces el agente de usuario no debe hacer nada.

por eso el navegador no se desplaza.

Un enfoque fácil es aprovechar este código:

Link Title

Este enfoque no obliga a actualizar la página, por lo que la barra de desplazamiento permanece en su lugar. Además, le permite cambiar mediante programación el evento onclick y manejar el enlace de eventos del lado del cliente usando jQuery.

Por estas razones, la solución anterior es mejor que:

Link Title
Link Title

donde la última solución evitará el problema del salto de desplazamiento si y solo si el método myClickHandler no falla.

Comentarios y puntuaciones

---

---

Utiliza Nuestro Buscador