rocket - ¿Cómo impido que una página web se desplace hacia la parte superior cuando se hace clic en un enlace que activa JavaScript?

quitar el javascript que bloquea la visualización de contenido wp rocket

Question

Cuando tengo un enlace que está conectado con un evento de jQuery o JavaScript como:

<a href="#">My Link</a>

¿Cómo evito que la página se desplace hacia la parte superior? Cuando elimino el atributo href del ancla, la página no se desplaza hacia la parte superior, pero el enlace no parece poder hacer clic.

Answer 1

¡Puedes configurar tu href en #! en vez de #

Por ejemplo,

<a href="#!">Link</a>

no hará ningún desplazamiento al hacer clic.

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

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

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

Este comportamiento se especifica en la especificación de HTML5 en la sección Navegador 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 la cadena vacía, entonces la parte indicada del documento es la parte superior del documento

Usando un href de "#!" en su lugar, funciona simplemente porque evita esta regla. No hay nada de mágico en el signo de exclamación: solo hace un identificador de fragmento conveniente porque es notablemente diferente de un fragmento típico y es poco probable que coincida alguna vez con el id o el name de un elemento en su página. De hecho, podríamos poner casi cualquier cosa después del hash; los únicos fragmentos que no serán suficientes son la cadena vacía, la palabra ''top'' o las cadenas que coinciden con los atributos de id o name de los elementos en la página.

Más exactamente, solo necesitamos un identificador de fragmento que nos haga caer en el paso 8 en el siguiente algoritmo para determinar la parte indicada del documento del fragmento:

1. Aplica el algoritmo del analizador de URL a la URL y deja que fragid sea ​​el componente de fragmento de la URL analizada resultante.

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

3. Permita que los fragid bytes sean el resultado del porcentaje de decodificación de fragid .

4. Deje que el decoded fragid sea ​​el resultado de aplicar el algoritmo del decodificador UTF-8 a los fragid bytes . Si el decodificador UTF-8 emite un error del decodificador, interrumpa el decodificador y en su lugar salte al paso etiquetado como no decoded fragid .

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

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

7. Si fragid es una coincidencia ASCII insensible a mayúsculas y minúsculas para la top de la cadena, la parte indicada del documento es la parte superior del documento; detener el algoritmo aquí.

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

Siempre que lleguemos al paso 8 y no haya una parte indicada del documento , entra en juego la siguiente regla:

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

por lo que el navegador no se desplaza.

Answer 2

Además, puede usar event.preventDefault dentro del atributo onclick .

<a href="#" onclick="event.preventDefault(); doSmth();">doSmth</a>

No es necesario escribir el evento exstra click.

Answer 3

Crea una página que contenga dos enlaces: uno en la parte superior y otro en la parte inferior. Al hacer clic en el enlace superior, la página debe desplazarse hacia abajo hasta la parte inferior de la página donde está presente el enlace inferior. Al hacer clic en el enlace inferior, la página tiene que desplazarse hacia arriba hasta la parte superior de la página.

Answer 4

Cuando llame a la función, sígala por return false example:

<input type="submit" value="Add" onclick="addNewPayment();return false;">

Answer 5

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

Hay dos maneras de hacer esto.

Opción 1: event.preventDefault()

Llame al método .preventDefault() del objeto de evento que se pasa a su controlador. Si está utilizando jQuery para enlazar sus manejadores, ese evento será una instancia de jQuery.Event y será la versión jQuery de .preventDefault() . Si está utilizando addEventListener para enlazar sus manejadores, 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();
})

Opción 2: return false;

En jQuery :

Si devuelve falso de un controlador de eventos, se llamará automáticamente a event.stopPropagation () y event.preventDefault ()

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

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

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

Answer 6

Deberías cambiar el

<a href="#">My Link</a>

a

<a href="javascript:;">My Link</a>

De esta manera, cuando se hace clic en el enlace, la página no se desplazará hacia arriba. Esto es más limpio que usar href = "#" y luego evitar que se ejecute el evento predeterminado.

Tengo buenas razones para esto en la primera respuesta a esta pregunta , como el resultado return false; no se ejecutará si la función llamada arroja un error, o puede agregar el resultado return false; a una función doSomething() y luego olvida usar return doSomething();

Answer 7

Enlace a algo más sensato que la parte superior de la página en primer lugar. Luego cancela el evento predeterminado.

Ver la regla 2 de la mejora progresiva pragmática .

Answer 8

Es posible que desee comprobar su CSS. En el ejemplo aquí: https://css-tricks.com/the-checkbox-hack/ there''s position: absolute; top: -9999px; position: absolute; top: -9999px; . Esto es particularmente ridículo en Chrome, ya que onclick="whatever" todavía salta a la posición absoluta del elemento cliqueado.

Deshacer la position: absolute; top: -9999px; position: absolute; top: -9999px; , para display: none; podría ayudar.

Answer 9

La devolución falsa del código que está llamando funcionará y en varias circunstancias es el método preferido, pero también puede hacerlo de esta manera.

<a href="javascript:;">Link Title</a>

Cuando se trata de SEO, realmente depende de para qué se utilizará su enlace. Si vas a usarlo realmente para vincular a otro contenido, estaría de acuerdo en que querrías algo significativo aquí, pero si utilizas el enlace para fines de funcionalidad tal como lo hace para la barra de herramientas de publicaciones (negrita, cursiva, hipervínculo) , etc.) entonces probablemente no importe.

Answer 10

Para el colapso de Bootstrap 3, si no especifica el objetivo de datos en el anclaje y confía en href para determinar el objetivo, se evitará el evento. Si usa data-target, necesitará evitar el evento usted mismo.

<button type="button" class="btn btn-default" data-toggle="collapse" data-target="#demo">Collapse This</button>
<div id="demo" class="collapse">
<p>Lorem ipsum dolor sit amet</p>
</div>

Answer 11

Prueba esto:

<a href="#" onclick="return false;">My Link</a>

Answer 12

Si simplemente puede cambiar el valor href , debe usar:

<a href="javascript:void(0);">Link Title</a>

Otra buena solución que acabo de presentar es usar jQuery para detener la acción de clic y hacer que la página se desplace, pero solo para los enlaces href="#" .

<script type="text/javascript">
/* Stop page jumping when links are pressed */
$(''a[href="#"]'').live("click", function(e) {
return false; // prevent default click action from happening!
e.preventDefault(); // same thing as above
});
</script>

Answer 13

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

<a href="javascript:void(0);">Link Title</a>

Este enfoque no obliga a una actualización de 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 del evento del lado del cliente usando jQuery.

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

<a href="javascript:myClickHandler();">Link Title</a>
<a href="#" onclick="myClickHandler(); return false;">Link Title</a>

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

Answer 14

Usted simplemente puede escribir así también:

<a href="#!" onclick="function()">Delete User</a>

Answer 15

<a onclick="yourfunction()">

esto funcionará bien. no es necesario agregar href = "#"