Comment empêcher un clic sur un lien '#' de sauter en haut de page?

J'utilise actuellement des <a>balises avec jQuery pour lancer des choses comme des événements de clic, etc.

L'exemple est <a href="#" class="someclass">Text</a>

Mais je déteste la façon dont le «#» fait sauter la page en haut de la page. Que puis-je faire à la place?

Dans jQuery, lorsque vous gérez l'événement click, renvoie false pour empêcher le lien de répondre de la manière habituelleempêcher l'action par défaut, qui est de visiter l' hrefattribut, d'avoir lieu (selon le commentaire de PoweRoy et la réponse d'Erik ):

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

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

Donc c'est vieux mais ... juste au cas où quelqu'un trouverait ça dans une recherche.

Utilisez simplement "#/"au lieu de "#"et la page ne sautera pas.

vous pouvez même l'écrire comme ceci:

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

je ne suis pas sûr que c'est une meilleure façon mais c'est une façon :)

Solution # 1: (simple)

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

Solution n ° 2: (nécessaire javascript)

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

Solution n ° 3: (nécessaire jQuery)

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

Vous pouvez utiliser event.preventDefault()pour éviter cela. En savoir plus ici: http://api.jquery.com/event.preventDefault/ .

Utilisez simplement <input type="button" />au lieu de <a>et utilisez CSS pour le styliser pour ressembler à un lien si vous le souhaitez.

Les boutons sont spécialement conçus pour les clics et n'ont pas besoin d'attributs href.

La meilleure façon est d'utiliser l'action onload pour créer le bouton et l'ajouter où vous en avez besoin via javascript, donc avec javascript désactivé, ils ne s'afficheront pas du tout et ne confondent pas l'utilisateur.

Lorsque vous utilisez, href="#"vous obtenez des tonnes de liens différents pointant vers le même emplacement, ce qui ne fonctionnera pas lorsque l'agent ne prend pas en charge JavaScript.

Si vous souhaitez utiliser une ancre, vous pouvez utiliser http://api.jquery.com/event.preventDefault/ comme les autres réponses suggérées.

Vous pouvez également utiliser n'importe quel autre élément comme une étendue et y attacher l'événement click.

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

Vous pouvez utiliser #0 comme href, car 0n'est pas autorisé comme identifiant, la page ne sautera pas.

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

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

Utilisez simplement

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

JQUERY

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

Si l'élément n'a pas de valeur href significative, alors ce n'est pas vraiment un lien, alors pourquoi ne pas utiliser un autre élément à la place?

Comme suggéré par Neothor, une durée est tout aussi appropriée et, si elle est correctement conçue, elle sera visiblement évidente comme un élément sur lequel vous pouvez cliquer. Vous pouvez même attacher un événement de vol stationnaire, pour faire `` s'allumer '' l'elemnt lorsque la souris de l'utilisateur se déplace dessus.

Cependant, cela dit, vous voudrez peut-être repenser la conception de votre site pour qu'il fonctionne sans javascript, mais est amélioré par javascript lorsqu'il est disponible.

Les liens avec href = "#" devraient presque toujours être remplacés par un élément bouton:

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

L'utilisation de liens avec href = "#" est également un problème d'accessibilité car ces liens seront visibles pour les lecteurs d'écran, qui liront "Lien - Texte" mais si l'utilisateur clique dessus, il n'ira nulle part.

Vous pouvez simplement passer une balise d'ancrage sans propriété href et utiliser jQuery pour effectuer l'action requise:

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

J'ai utilisé:

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

L' #/astuce fonctionne, mais ajoute un événement historique au navigateur. Donc, cliquer en arrière ne fonctionne pas comme l'utilisateur peut le souhaiter / s'attendre à ce qu'il le fasse.

$('body').click('a[href="#"]', function(e) {e.preventDefault() }); est la façon dont je suis allé, car cela fonctionne pour le contenu déjà existant, et tous les éléments ajoutés au DOM après le chargement.

Plus précisément, je devais le faire dans un menu déroulant de démarrage à l'intérieur d'un .btn-group(Référence) , alors j'ai fait:

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

De cette façon, il a été ciblé et n'a rien affecté d'autre sur la page.

J'ai toujours utilisé:

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

lorsque vous essayez d'empêcher le saut de page. Je ne sais pas si c'est le meilleur, mais cela semble bien fonctionner depuis des années.

Il existe 4 façons similaires d'empêcher la page de sauter vers le haut sans JavaScript:

Option 1:

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

Option 2:

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

Option 3:

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

Option 4 ( non recommandé ):

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

Mais il vaut mieux l'utiliser event.preventDefault()si vous distribuez l'événement click dans jQuery.

Vous pouvez également retourner false après avoir traité votre requête.

Par exemple.

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

J'utilise quelque chose comme ça:

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

Pour empêcher la page de sauter, vous devez appeler e.stopPropagation();après avoir appelé e.preventDefault();:

stopPropagationempêche l'événement de remonter dans l'arborescence DOM. Plus d'informations ici: https://api.jquery.com/event.stoppropagation/

Si vous souhaitez migrer vers une section d'ancrage sur la même page sans sauter de page, utilisez:

Utilisez simplement "# /" au lieu de "#" par exemple

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

Ajouter quelque chose après #définit le focus de la page sur l'élément avec cet ID. La solution la plus simple consiste à utiliser #/même si vous utilisez jQuery. Cependant, si vous gérez l'événement dans jQuery, event.preventDefault()c'est la voie à suivre.

Le <a href="#!">Link</a>et<a href="#/">Link</a> ne fonctionne pas si l'on doit cliquer sur la même entrée plus d'une fois .. il suffit d'un clic pour chaque événement sur plusieurs entrées.

la meilleure façon de procéder est <a href="#">Link</a>

puis,

event.preventDefault();