Javascript Girl
  1. Javascript Girl
  3. Javascript ancre éviter de faire défiler vers le haut sur le clic
Intereting Posts
JavaScript / jQuery String Replace With Regex Comment testez-vous NaN en version Javascript? Tâche Grunt: Supprimer les lignes entre les marqueurs dans un fichier HTML Capturing Scroll Wheel Events Modification des réponses HTTP dans l'extension Firefox Passer un paramètre supplémentaire à jQuery getJSON () succès de la fonction de rappel Comment lire toutes les données de la base de données sur son déclencheur d'écriture sur l'un de ses enfants dans les fonctions du Firebase? Comment analyser une chaîne HTML dans Google Apps Script sans utiliser XmlService? Appelez automatiquement un numéro prédéfini sur Android avec PhoneGap Comment obtenir plusieurs valeurs et objets sélectionnés à partir de listbox en utilisant javascript Insérez un gestionnaire de clics JQuery qui exécute avant ceux déjà enregistrés Javascript – Comment afficher les caractères d'échappement dans une chaîne? Calcul financier précis en JavaScript. Quels sont les Gotchas? Pass Javascript Variable to PHP POST Comment supprimer de façon fiable les caractères invisibles qui brisent le code?

Javascript ancre éviter de faire défiler vers le haut sur le clic

J'ai créé une fonction en javascript que j'ajoute à une ancre en tant que telle

Javascript: 

somefunction = function () {alert('foo')}

Html: 

 <a href="#" onclick="return somefunction()">anchor</a>

Chaque fois que je clique sur l'ancrage, la fonction s'exécute mais l'écran se déplace vers le haut

Je sais que je pourrais le faire 

 <a href="javascript:void(0)" onclick="return somefunction()">anchor</a>

Mais j'ai vu la première option mise en œuvre sans que ce dernier ne se déploie

Y a-t-il une astuce?

Je vous remercie

L'onclick oblige la page à se soumettre de nouveau, donc en défilement vers le haut.

Vous avez besoin de l'événement onclick pour renvoyer un faux afin d'éviter le retour.

Cela peut se faire en changeant votre fonction pour renvoyer un faux: 

 somefunction = function () {alert('foo'); return false;}

Ou pour modifier le lien et l'événement onClick pour le faire: 

 <a href="javascript:void(0)" onclick="somefunction(); return false;">anchor</a>

L'astuce est que votre onclick renvoie la valeur d'une somefunction , de sorte que si vous vous assurez que certains somefunction toujours return false , l'événement renverra également les fausses somefunction et annulera le comportement par défaut de l'ancre.

Donc, cela devrait résoudre votre problème: 

 somefunction = function () { alert('foo'); return false; }

Mais je dois mentionner que lorsqu'il y a une erreur quelque part dans une somefunction , le reste du javascript ne s'exécutera pas, et le navigateur suivra toujours le lien vers # . Il est conseillé, par conséquent, d'utiliser javascript:void(0) place, car cela vous débarrassera de ce problème.

Renvoie le false de votre gestionnaire Onclick, par exemple: 

 <a href="#" onclick="somefunction(); return false;">anchor</a>

Vous devez faire somefunction() renvoyer false , ou vous devez ajouter explicitement return false à votre onclick OnClick. Par exemple: 

 <a href="#" onclick="somefunction(); return false;">anchor</a>

Cela fera que le navigateur ignore la partie href du lien lorsque quelqu'un clique dessus.