Comment empêcher un clic sur un '#' lien de sauter vers le haut de la page?

donc c'est vieux mais... juste au cas où quelqu'un trouve ce, dans une recherche.

il suffit d'utiliser "#/" au lieu de "#" et la page ne sautera pas.

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

<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 :)

Vous pouvez utiliser event.preventDefault() pour éviter cela. Lire la suite: http://api.jquery.com/event.preventDefault / .

Solution #1: (plain)

<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>

il suffit d'utiliser <input type="button" /> au lieu de <a> et utiliser CSS pour le style pour ressembler à un lien si vous le souhaitez.

sont faits spécifiquement pour cliquer, et ils 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 avez besoin via javascript, donc avec javascript désactivé, ils ne montreront pas du tout et ne pas confondre l'utilisateur.

quand vous utilisez href="#" vous obtenez des tonnes de liens différents pointant vers le même endroit, ce qui ne fonctionnera pas lorsque L'agent ne supporte pas JavaScript.

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

Vous pouvez également utiliser tout autre élément comme un span et joignez l'événement click.

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

vous pouvez utiliser #0 comme href, puisque 0 n'est pas autorisé comme id, la page ne sautera pas.

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

il suffit d'utiliser

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

JQUERY

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

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

comme le suggère Neothor, une portée est tout aussi appropriée et, si elle est correctement conçue, elle sera visiblement évidente en tant qu'élément pouvant être cliqué sur. Vous pouvez même attacher un événement de vol stationnaire, pour faire l'elemnt 'light up' comme la souris de l'utilisateur se déplace sur elle.

cependant, après avoir dit ceci, vous pouvez vouloir repenser la conception de votre site afin qu'il fonctionne sans javascript, mais est améliorée par javascript quand il est disponible.

vous pourriez juste passer une étiquette d'ancrage sans une propriété href, et utiliser jQuery pour faire l'action requise:

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

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 par les lecteurs écran, qui liront" lien - texte", mais si l'utilisateur clique, il n'ira nulle part.

j'ai utilisé:

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

si vous voulez migrer vers une section ancre sur la même page sans page sautant utiliser:

il suffit d'utiliser "#/" au lieu de "#" E. g

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

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

j'ai toujours utilisé:

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

en essayant d'empêcher le saut de page. Vous ne savez pas si c'est le meilleur, mais il semble avoir travaillé pendant plusieurs années.

vous pouvez également retourner false après avoir traité votre jquery.

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(); :

stopPropagation empêche l'événement de monter dans le DOM tree. Plus d'informations ici: https://api.jquery.com/event.stoppropagation /

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

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

spécifiquement, je devais le faire dans un menu déroulant bootstrap à l'intérieur d'un .btn-group (référence) , donc 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 pas affecté quoi que ce soit d'autre sur la page.

il y a 4 façons similaires d'empêcher la page de sauter au sommet sans aucun 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 est préférable d'utiliser event.preventDefault() si vous donnez l'événement de clic dans jQuery.

ajouter quelque chose après # place le foyer de la page à l'élément avec cet ID. La solution la plus simple est d'utiliser #/ même si vous utilisez jQuery. Cependant, si vous vous occupez de l'événement à jQuery, event.preventDefault() est la voie à suivre.