2010-01-07 8 views
26

Possible en double:
How do I stop a web page from scrolling to the top when a link is clicked that triggers javascript?lien avec href = page défile "n" en haut lorsqu'il est utilisé avec jquery slideToggle

J'utilise le slideToggle de jquery pour afficher/masquer divs. l'élément qui contrôle le glissement est un lien de texte (du texte à l'intérieur de < \ a>) qui a href = "#" pour ressembler à un lien (souligné, changement de curseur). Le problème est que lorsque le lien est cliqué, en plus de l'effet de glissement, la page défile vers le haut.

J'ai essayé de remplacer href = "#" avec href = "" mais cela désactive l'effet div show/hide. Je suppose que je pourrais ajouter à la balise Name = "somename", puis mettre le href à href = "# somename" mais je préfère ne pas utiliser des trucs comme ça.

Pourquoi href = "#" fait-il défiler la page vers le haut?

toutes les idées seraient très appréciés

Répondre

70

Plusieurs options:

  1. Mettre return false; au bas de votre gestionnaire de clic et le href suivre l'habitude.
  2. Changer le href javascript:void(0);
  3. Appel preventDefault sur l'événement dans votre gestionnaire:

    function(e) { 
        e.preventDefault(); 
        // your event handling code 
    } 
    
+3

merci à tous pour vos réponses. j'ai utilisé return false et cela fonctionne parfaitement stackoverflow est incroyable! – samoyed

+0

Excellente solution thenduks, m'a sauvé beaucoup de tracas =) –

+4

'return false;' n'est pas la bonne façon de gérer cela. Très souvent, les développeurs lancent paresseusement 'return false;' à la fin de leurs gestionnaires d'événements sans comprendre les conséquences de cette action. Il n'y a aucune raison d'empêcher la propagation de l'événement. Tout ce que vous devez faire ici est d'empêcher l'action par défaut de l'agent utilisateur. Donc, 'preventDefault()' est la fonction correcte à utiliser ici. –

5

Vous devez ajouter return false; à votre gestionnaire de clic.
Cela empêchera le navigateur d'exécuter l'action par défaut pour le clic.

+0

et que cela a bien fonctionné. –

1

D'autres vous ont donné des solutions. Mais pour répondre spécifiquement à votre question, # se réfère à la page en cours. Et puisque l'interprétation des balises permet d'afficher le top de l'étiquette, un simple clic sur une balise # vous fait passer en haut de la page en cours.

1

return false ou event.preventDefault() sont ce dont vous avez besoin dans votre gestionnaire d'événements click pour empêcher l'action par défaut. Un élément <a> avec un href de # entraîne l'affichage par défaut de la fenêtre d'affichage du navigateur en tant qu'action par défaut

Questions connexes