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

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

Ejemplo es <a href="#" class="someclass">Text</a>

Pero odio cómo el '#' hace que la página salte a la parte superior de la página. ¿Qué puedo hacer en su lugar?

En jQuery, cuando manejas el evento click, devuelve falso para evitar que el enlace responda de la manera habitualevitar que la acción predeterminada, que es visitar el hrefatributo, tenga 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();
});

Entonces esto es viejo pero ... en caso de que alguien encuentre esto en una búsqueda.

Simplemente use en "#/"lugar de "#"y la página no saltará.

incluso puedes escribirlo así:

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

No estoy seguro de que sea una mejor manera, pero es una forma :)

Solución # 1: (simple)

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

Solución # 2: (necesaria javascript)

<a href="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. Lea más aquí: http://api.jquery.com/event.preventDefault/ .

Simplemente use en <input type="button" />lugar de <a>y use CSS para diseñarlo para que se vea como 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 de carga 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 lo usa href="#", obtiene toneladas de enlaces diferentes que apuntan a la misma ubicación, lo que no funcionará cuando el agente no sea compatible con JavaScript.

Si desea usar un ancla, puede usar http://api.jquery.com/event.preventDefault/ como las otras respuestas sugeridas.

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

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

Puedes usarlo #0como href, ya 0que no está permitido como id, la página no saltará.

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

$('a[href="#"]').click(function(e) {e.preventDefault(); });

Solo usa

<a href="javascript:;" class="someclass">Text</a>

JQUERY

$('.someclass').click(function(e) { alert("action here"); }

Si el elemento no tiene un valor href significativo, entonces no es realmente un enlace, entonces, ¿por qué no utilizar algún otro elemento?

Según lo sugerido por Neothor, un lapso es igual de apropiado y, si se diseña correctamente, será visiblemente obvio como un elemento en el que se puede hacer clic. Incluso puede adjuntar un evento de desplazamiento, para que el elemento se "ilumine" cuando el mouse del usuario se mueva sobre él.

Sin embargo, una vez dicho esto, es posible que desee repensar el diseño de su sitio para que funcione sin javascript, pero javascript lo mejore cuando esté disponible.

Los enlaces con href = "#" casi siempre deben reemplazarse con un elemento de botón:

<button class="someclass">Text</button>

El uso de enlaces con href = "#" también es un problema de accesibilidad, ya que estos enlaces serán visibles para los lectores de pantalla, que leerán "Enlace - Texto", pero si el usuario hace clic, no irá a ningún lado.

Simplemente puede pasar una etiqueta de anclaje sin una propiedad href y usar jQuery para realizar la acción requerida:

<a class="foo">bar</a>

He usado:

<a href="javascript://nop/" class="someClass">Text</a>

El #/truco funciona, pero agrega un evento de historial al navegador. Por lo tanto, hacer clic hacia atrás no funciona, ya que el usuario puede quererlo / esperarlo.

$('body').click('a[href="#"]', function(e) {e.preventDefault() }); es mi camino, ya que funciona para contenido ya existente y cualquier elemento agregado al DOM después de la carga.

Específicamente, necesitaba hacer esto en un menú desplegable de arranque dentro de una .btn-group(Referencia) , así que lo hice:

$('body').click('.dropdown-menu li a[href="#"]', function(e) {e.preventDefault() });

De esta manera fue dirigido, y no afectó nada más en la página.

Siempre he usado:

<a href="#?">Some text</a>

al intentar evitar el salto de página. No estoy seguro si este es el mejor, pero parece que ha estado funcionando bien durante años.

Hay 4 formas similares para evitar que la página salte a la parte superior sin JavaScript:

Opción 1:

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

Opcion 2:

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

Opcion 3:

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

Opción 4 ( no recomendado ):

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

Pero es mejor usarlo event.preventDefault()si está entregando el evento click en jQuery.

También puede devolver falso después de procesar su jquery.

P.ej.

$(".clickableAnchor").live(
    "click",
    function(){
        //your code
        return false; //<- prevents redirect to href address
    }
);

Yo uso algo como esto:

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

Para evitar que la página salte, debe llamar e.stopPropagation();después de llamar e.preventDefault();:

stopPropagationevita que el evento suba al árbol DOM. Más información aquí: https://api.jquery.com/event.stoppropagation/

Si desea migrar a una sección de anclaje en la misma página sin saltar de página, use:

Simplemente use "# /" en lugar de "#" por ej.

<a href="#/home">Home</a>
<a href="#/about">About</a>
<a href="#/contact">contact</a> page will not jump up on click..

Agregar algo después #establece el foco de la página en el elemento con esa ID. La solución más simple es usar #/incluso si está usando jQuery. Sin embargo, si está manejando el evento en jQuery, este event.preventDefault()es el camino a seguir.

El <a href="#!">Link</a>y <a href="#/">Link</a>no funciona si uno tiene que hacer clic en la misma entrada más de una vez ... solo requiere un clic de evento para cada entrada múltiple.

Todavía la mejor manera de hacerlo es con <a href="#">Link</a>

luego,

event.preventDefault();