picture picture
octobre 4, 2006 JavaScript 2 Commentaires

Eviter le scrolling intempestif dû à l’utilisation de #

Lorsque l’on utilise certains liens Javascripts, la page se retrouve automatiquement scrollée vers le haut. Comment éviter cela ?

 

nombreux sont les appels JavaScript qui, lorsqu’ils ont besoin d’un lien pour activer les effets de leurs événements (onMouseOver, OnClick, etc…), se contentent de remplir le champ href avec le caractère "#" pour éviter que le clic ne renvoie l’utilisateur vers une page externe.

L’inconvénient est évidemment le suivant : si l’utilisateur a déjà fait défiler la page vers le bas quand il clique sur le lien en question, cette page est réaffichée depuis sont début.

Cela est dû au fait que le navigateur y voit une demande de recherche d’une "ancre nommée" (définie par <a name="monAncre"></a>), et ne la trouvant pas, renvoie par défaut le lecteur en haut du document ~:(

La bonne méthode consiste donc à se débarrasser du caractère #, et de tout autre caractère que le navigateur pourrait confondre avec le nom d’une page, et de se servir du pseudo-protocole "javascript:" . Celui-ci n’indique aucun protocole de communication réel, mais commande d’exécuter le code JavaScript qui s’y trouve.
En l’occurrence, il suffit d’indiquer un javascript: vide pour que cela fonctionne.

Ainsi par exemple pour ouvrir un pop-up :
<a href="#" onClick="window.open("popup.htm", 'lenomdelafenetre', 'width=50, height=50');">lien 1 qui va scoller </a>

deviendra simplement :
<a href="javascript:;" onClick="window.open(popup.htm, 'lenomdelafenetre', 'width=50, height=50');">Lien 2 qui ne va pas scroller </a>

8)

2 Responses to “Eviter le scrolling intempestif dû à l’utilisation de #”

2 Commentaires

  1. gnocchi dit :

    Grand emplacement! La conception est merveilleuse!

  2. Jean-Baptiste dit :

    Merci beaucoup pour la solution à ce problème qui m’empoisonnait la vie depuis un bon moment. :))

Commentaire

Name

Mail (ne sera pas publié)

Website

Laisser ces deux champs tels quels :
:D :-) :( :o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: