¿Cómo puedo evitar que un clic en un enlace ‘#’ salte a la parte superior de la página?

5 minutos de lectura

Avatar de usuario de st4ck0v3rfl0w
st4ck0v3rfl0w

actualmente estoy usando <a> etiquetas con jQuery para iniciar cosas como eventos de clic, etc.

Un ejemplo de lo que estoy haciendo es: <a href="#" class="someclass">Text</a>.

Pero no me gusta cómo el ‘#’ hace que la página salte a la parte superior de la página. ¿Qué puedo hacer en su lugar?

  • Duplicado de stackoverflow.com/questions/720970/jquery-hyperlinks-href-value/…

    – Bogdan Constantinescu

    15 de julio de 2010 a las 6:59

  • Estoy con David Dorward aquí, y gargantaun en la pregunta duplicada vinculada. Si tiene enlaces en su sitio web, deben funcionar como enlaces normales. Si JavaScript los intercepta y hace algo diferente, todo bien, pero necesita tener un enlace real allí, que lleve a una página real. Esto es necesario por todo tipo de razones, entre las que se encuentran el SEO y la accesibilidad.

    –Daniel Pryden

    15 de julio de 2010 a las 7:11


  • “Estúpido es como estúpido lo hace” Todos hemos estado allí antes 🙂

    -takeshin

    15 de julio de 2010 a las 12:24

Avatar de usuario de Chris
cris

Así que esto es antiguo pero… en caso de que alguien lo encuentre en una búsqueda.

Solo usa "#/" en lugar de "#" y la página no salta.

  • eso funciona porque navega al ancla llamada /no porque #/ tiene algún significado. puedes hacer lo mismo con #whateveryouwant y evitará un salto a la cima

    – jerga

    12 de junio de 2015 a las 15:54

  • @slang, aunque tiene razón, y esto es simplemente quisquilloso, pero preferiría usar “#/” en lugar de “#whateveryouwant” porque “#/” se usa con bastante frecuencia y, por lo tanto, revela intenciones (Código limpio). Sin embargo, aún podría ser una adición a la respuesta.

    – Jobbert

    4 mayo 2016 a las 11:01


  • Cuidado: esto crea un registro en el historial del navegador, por lo que hacer clic en Atrás no hará lo que el usuario cree que hará después de hacer clic en un enlace con #/ o cualquier otra cosa, por ejemplo #whatever.

    – Tiempo de estudio

    5 de septiembre de 2016 a las 7:36


  • @DarrenSweeney Tiene razón, pero el solo uso de un # también crea un registro en el historial del navegador. Básicamente el comportamiento es el mismo.

    – Gary Brunton

    11 de enero de 2017 a las 16:51

  • ¿Alguien sabe por qué ocurre el salto en primer lugar?

    – Rubén S.

    10 mayo 2022 a las 12:15

Avatar de usuario de BoltClock
PernoReloj

En jQuery, cuando maneja el evento de clic, devuelve falso para evitar que el enlace responda de la manera habitual evitar la acción predeterminada, que es visitar el href atributo, de tener lugar (según el comentario de PoweRoy y la respuesta de Erik):

$('a.someclass').click(function(e)
{
    // Special stuff to do when this link is clicked...

    // Cancel the default action
    e.preventDefault();
});

  • @pranay: OP especificó que está usando jQuery para trabajar con estos enlaces.

    – BoltClock

    15 de julio de 2010 a las 5:40

  • En lugar de devolver false, haz un event.preventDefault(). Esto es más claro para las personas que leerán su código.

    – RvdK

    15 de julio de 2010 a las 6:06

  • @PowerRoy: lo tengo. Hice la edición y aprendí algo nuevo 🙂

    – BoltClock

    15 de julio de 2010 a las 6:24

  • @BoltClock El OP debe usar botones para manejar los eventos de clic en lugar de anclas. Su respuesta es bastante útil, pero en el caso de que href apunte a algún lugar y no necesite la redirección en este momento. Evitar el comportamiento predeterminado de acción que no es necesario en absoluto es un tipo de consejo como: toma el cuchillo, agarra la hoja y clava los clavos con el mango 🙂 ¡Elige la herramienta adecuada para el trabajo!

    -takeshin

    15 de julio de 2010 a las 7:14

  • Si jquery: $('a[href=#]').click(function(e) { e.preventDefault(); });

    – Snufkin

    5 mayo 2018 a las 10:40


Incluso puedes escribirlo así:

<a href="https://stackoverflow.com/questions/3252730/javascript:void(0);"></a>

No estoy seguro de que sea una mejor manera, pero es una manera 🙂

  • Este método estaba bien para versiones anteriores a HTML 4, pero hoy en día es una práctica muy mala, ya que interrumpe demasiadas acciones de navegación, como “abrir enlace en una pestaña nueva”.

    – Steve-o

    15 de julio de 2010 a las 7:20

  • tal vez tengas razón, pero… en este caso no importa porque está dando un evento onclick, así que abrir el enlace en una nueva pestaña no funcionaría de todos modos…

    – chico Schaller

    15 de julio de 2010 a las 8:48

  • El atajo es href='javascript:;' pero tenga cuidado, desencadena el evento window.beforeUnload en IE

    – Mihir

    20 de mayo de 2016 a las 7:22

  • ¿Esto podría romper su propia función? Porque si hago esto, mi función para renderizar diapositivas ya no se activa.

    – usuario3806549

    13 de septiembre de 2016 a las 9:47

Avatar de usuario de Nabi KAZ
nabi kaz

Solución #1: (simple)

<a href="#!" class="someclass">Text</a>

Solución #2: (necesario javascript)

<a href="https://stackoverflow.com/questions/3252730/javascript:void(0);" class="someclass">Text</a>

Solución #3: (necesario jQuery)

<a href="#" class="someclass">Text</a>
<script>
$('a.someclass').click(function(e) {
    e.preventDefault();
});
</script>

Puedes usar event.preventDefault() para evitar esto. Leer más aquí: http://api.jquery.com/event.preventDefault/.

Solo usa <input type="button" /> en lugar de <a> y use CSS para diseñarlo para que parezca un enlace si lo desea.

Los botones están hechos específicamente para hacer clic y no necesitan ningún atributo href.

La mejor manera es usar la acción onload para crear el botón y agregarlo donde lo necesite a través de javascript, por lo que con javascript deshabilitado, no se mostrarán en absoluto y no confundirán al usuario.

cuando usas href="#" obtiene toneladas de enlaces diferentes que apuntan a la misma ubicación, lo que no funcionará cuando el agente no admita JavaScript.

Avatar de usuario de Neothor
Neothor

Si quieres usar un ancla puedes usar http://api.jquery.com/event.preventDefault/ como las otras respuestas sugeridas.

También puede usar cualquier otro elemento como un lapso y adjuntar el evento de clic a eso.

$("span.clickable").click(function(){
alert('Yeah I was clicked');
});

¿Ha sido útil esta solución?