Comment puis-je empêcher une page Web de défiler vers le haut lorsqu'un clic sur un lien déclenchant JavaScript est activé?

Question

Lorsque j'ai un lien qui est connecté à un événement JQuery ou JavaScript, tel que:

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

Comment puis-je empêcher la page de défiler vers le haut? Lorsque je supprime l'attribut href de l'ancre, la page ne défile pas en haut, mais le lien ne semble pas être cliquable. Merci pour l'aide!

Answer 1

Vous devez return false; dans le gestionnaire de clics jQuery pour éviter que l'action par défaut ne se produise:

 <a href="#" id="ma_link">Do something fancy</a>
 

Puis avec jQuery:

 $('#ma_link').click(function(e) {
     // do something fancy
     return false; // prevent default click action from happening!
     e.preventDefault(); // same thing as above
});
 

Answer 2

Réponse Courte:

La chose la plus simple est de définir vos href aux #! au lieu de #

Par exemple,

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

de ne pas faire de défilement lorsque l'utilisateur clique dessus.

Voici un Violon pour illustrer cela (juste froisser votre navigateur jusqu'à ce que vos obtenir une barre de défilement):
http://jsfiddle.net/9dEG7/

---

Pour les spec nerds - pourquoi cela fonctionne:

Ce comportement est spécifié dans la spec HTML5 en vertu de la Navigation d'un identificateur de fragment d' article. La raison pour laquelle un lien avec un href de l' "#" provoque le document pour faire défiler vers le haut c'est que ce comportement est spécifié de manière explicite que la façon de gérer un vide identificateur de fragment:

2. Si fragid est la chaîne vide, l'indication de la partie du document est le haut du document

Aide a href d' "#!" au lieu de cela fonctionne simplement parce qu'il échappe à cette règle. Il n'y a rien de magique dans le point d'exclamation, il est tout simplement une pratique identificateur de fragment parce que c'est sensiblement différent d'un typique fragid et peu susceptible de correspondre à l' id ou name d'un élément sur votre page. En effet, on peut mettre presque n'importe quoi après le hachage; la seule fragids qui ne suffira pas sont la chaîne vide, le mot "top", ou de chaînes de caractères qui correspondent name ou id attributs des éléments sur la page.

Plus exactement, nous avons juste besoin d'un identificateur de fragment qui va nous amener jusqu'à l'étape 8 dans l'algorithme suivant pour déterminer l' indique la partie du document à partir de la fragid:

1. Appliquer l'URL algorithme analyseur à l'URL, et laissez fragid être le fragment de la composante de la résultante analysé URL.

2. Si fragid est la chaîne vide, l'indication de la partie du document est le top du document; arrêt de l'algorithme ici.

3. Laissez - fragid bytes être le résultat d'un pour cent de décodage fragid.

4. Laissez - decoded fragid être le résultat de l'application de l'UTF-8 décodeur algorithme d' fragid bytes. Si l'UTF-8 décodeur émet un décodeur d'erreur, abandonner le décodeur et au lieu de sauter à l'étape étiquetés no decoded fragid.

5. Si il y a un élément dans le DOM qui a un ID exactement égale à decoded fragid, alors le premier élément dans l'arbre de commande est indiqué partie du document; arrêt de l'algorithme ici.

6. Pas décodé fragid: S'il y a un élément dans le DOM qui a un nom d'attribut dont la valeur est exactement égale à fragid (pas decoded fragid), puis le premier élément dans l'arbre de commande est indiqué partie du document; arrêt de l'algorithme ici.

7. Si fragid est un fichier ASCII est pas sensible à la casse match pour la chaîne top, puis l'indication de la partie du document est le top du document; arrêt de l'algorithme ici.

8. Sinon, il n'est pas indiqué partie du document.

Aussi longtemps que nous avons atteint l'étape 8 et il n'est pas indiqué partie du document, la règle suivante:

Si il n'est pas indiqué ... alors l'agent utilisateur ne doivent rien faire.

c'est pourquoi le navigateur ne prend pas de défilement.

Answer 3

Une approche simple consiste à exploiter ce code:

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

Cette approche ne force pas l'actualisation de la page, la barre de défilement reste donc en place. En outre, il vous permet de modifier par programme l'événement onclick et de gérer la liaison d'événements côté client à l'aide de jQuery.

Pour ces raisons, la solution ci-dessus est meilleure que:

 <a href="javascript:myClickHandler();">Link Title</a>
<a href="#" onclick="myClickHandler(); return false;">Link Title</a>
 

où la dernière solution évitera le problème de défilement si et seulement si la méthode myClickHandler n’échoue pas.

Answer 4

Essaye ça:

 <a href="#" onclick="return false;">My Link</a>
 

Answer 5

Lien vers quelque chose de plus sensé que le haut de la page. Puis annulez l'événement par défaut.

Voir la règle 2 de l' amélioration progressive pragmatique .