Come impedire che un clic su un link "#" salti all'inizio della pagina?

Attualmente sto usando i <a>tag con jQuery per avviare cose come eventi di clic, ecc.

L'esempio è <a href="#" class="someclass">Text</a>

Ma odio come '#' fa saltare la pagina all'inizio della pagina. Cosa posso fare invece?

In jQuery, quando gestisci l'evento click, restituisce false per impedire al link di rispondere normalmenteimpedire che si hrefverifichi l' azione predefinita, che consiste nel visitare l' attributo, (secondo il commento di PoweRoy e la risposta di Erik ):

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

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

Quindi questo è vecchio ma ... nel caso qualcuno lo trovi in ​​una ricerca.

Basta usare "#/"invece di "#"e la pagina non salterà.

puoi persino scriverlo in questo modo:

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

non sono sicuro che sia un modo migliore ma è un modo :)

Soluzione n. 1: (semplice)

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

Soluzione n. 2: (necessario javascript)

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

Soluzione n. 3: (necessario jQuery)

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

Puoi usarlo event.preventDefault()per evitarlo. Maggiori informazioni qui: http://api.jquery.com/event.preventDefault/ .

Basta usare <input type="button" />invece di <a>CSS e usare lo stile per assomigliare ad un collegamento se lo si desidera.

I pulsanti sono creati appositamente per fare clic e non hanno bisogno di alcun attributo href.

Il modo migliore è usare l'azione onload per creare il pulsante e aggiungerlo dove necessario tramite javascript, quindi con javascript disabilitato, non verranno mostrati affatto e non confondere l'utente.

Quando lo usi href="#"ottieni tonnellate di link diversi che puntano alla stessa posizione, il che non funzionerà quando l'agente non supporta JavaScript.

Se si desidera utilizzare un'ancora è possibile utilizzare http://api.jquery.com/event.preventDefault/ come le altre risposte suggerite.

Puoi anche utilizzare qualsiasi altro elemento come un intervallo e associare l'evento click a quello.

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

È possibile utilizzare #0come href, poiché 0non è consentito come ID, la pagina non salterà.

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

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

Basta usare

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

jquery

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

Se l'elemento non ha un valore href significativo, allora in realtà non è un collegamento, quindi perché non utilizzare un altro elemento?

Come suggerito da Neothor, un intervallo è altrettanto appropriato e, se disegnato correttamente, sarà visibilmente evidente come un elemento su cui è possibile fare clic. È anche possibile associare un evento hover, per far illuminare l'elemento mentre il mouse dell'utente si sposta su di esso.

Tuttavia, detto questo, potresti voler ripensare il design del tuo sito in modo che funzioni senza javascript, ma è migliorato da javascript quando è disponibile.

I collegamenti con href = "#" dovrebbero quasi sempre essere sostituiti con un elemento pulsante:

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

L'uso dei collegamenti con href = "#" è anche un problema di accessibilità poiché questi collegamenti saranno visibili agli screen reader, che leggeranno "Link - Testo" ma se l'utente fa clic non andrà da nessuna parte.

Potresti semplicemente passare un tag anchor senza una proprietà href e utilizzare jQuery per eseguire l'azione richiesta:

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

Ho usato:

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

Il #/trucco funziona, ma aggiunge un evento storico al browser. Pertanto, il clic indietro non funziona come l'utente potrebbe desiderare / aspettarsi.

$('body').click('a[href="#"]', function(e) {e.preventDefault() }); è la mia strada, poiché funziona per i contenuti già esistenti e tutti gli elementi aggiunti al DOM dopo il caricamento.

In particolare, dovevo farlo in un menu a discesa bootstrap all'interno di un .btn-group(Riferimento) , quindi ho fatto:

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

In questo modo è stato scelto come target e non ha influito su nient'altro sulla pagina.

Ho sempre usato:

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

quando si cerca di impedire il salto della pagina. Non sono sicuro che sia il migliore, ma sembra funzionare bene da anni.

Esistono 4 modi simili per impedire alla pagina di saltare in alto senza JavaScript:

Opzione 1:

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

Opzione 2:

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

Opzione 3:

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

Opzione 4 ( non consigliata ):

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

Ma è meglio usarlo event.preventDefault()se stai gestendo l'evento click in jQuery.

Puoi anche restituire false dopo aver elaborato il tuo jquery.

Per esempio.

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

Uso qualcosa del genere:

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

Per evitare che la pagina salti, è necessario chiamare e.stopPropagation();dopo aver chiamato e.preventDefault();:

stopPropagationimpedisce all'evento di salire sull'albero DOM. Maggiori informazioni qui: https://api.jquery.com/event.stoppropagation/

Se si desidera migrare in una sezione di ancoraggio nella stessa pagina senza saltare la pagina, utilizzare:

Basta usare "# /" invece di "#" ad es

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

L'aggiunta di qualcosa dopo #imposta il focus della pagina sull'elemento con quell'ID. La soluzione più semplice è usare #/anche se stai usando jQuery. Tuttavia, se stai gestendo l'evento in jQuery, event.preventDefault()è la strada da percorrere.

Il <a href="#!">Link</a>e <a href="#/">Link</a>non funziona se si deve fare clic sullo stesso input più di una volta .. richiede solo 1 clic sull'evento per ciascuno su più input.

è ancora il modo migliore per andare <a href="#">Link</a>

poi,

event.preventDefault();