jquery cliquez sur l'élément d'ancrage pour faire défiler vers le haut?

Question

jQuery hyperlinks - href value? text] [1]

Je rencontre un problème lors de l'utilisation de jquery et d'un événement click attaché à un élément d'ancrage. [1]: jQuery hyperlinks - href value? "Cette" question SO semble être un doublon, et la réponse acceptée ne semble pas résoudre le problème. Désolé si cela est mauvais SO étiquette.

Dans ma fonction .ready() J'ai:

jQuery("#id_of_anchor").click(function(event) { //start function when any update link is clicked 
     Function_that_does_ajax(); 
     }); 

et mon ancre ressemble à ceci:

<a href="#" id="id_of_anchor"> link text </a> 

mais lorsque le lien est cliqué, la fonction ajax est effectuée comme souhaité, mais le navigateur défile en haut de la page. pas bon.

J'ai essayé d'ajouter:

event.preventDefault(); 

avant d'appeler ma fonction qui ne l'ajax, mais cela ne suffit pas. Qu'est-ce qui me manque?

Précision

Je l'ai utilisé toutes les combinaisons de

return false; 
event.preventDefault(); 
event.stopPropagation(); 

avant et après mon appel à mes js fonction ajax. Il défile toujours vers le haut.

Answer 1

Cela devrait fonctionner, pouvez-vous préciser ce que vous entendez par «avant»? Est-ce que tu fais ça?

jQuery("#id_of_anchor").click(function(event) { 
    event.preventDefault(); 
    Function_that_does_ajax(); 
}); 

Parce que devrait travailler dans le sens que si cela ne fonctionne pas que vous faites quelque chose de mal et nous aurions besoin de voir plus de code. Cependant, par souci d'exhaustivité, vous pouvez aussi essayer ceci:

jQuery("#id_of_anchor").click(function() { 
    Function_that_does_ajax(); 
    return false; 
}); 

EDIT

Here is an example of this working.

Les deux liens utilisent ce code:

$('#test').click(function(event) { 
    event.preventDefault(); 
    $(this).html('and I didnt scroll to the top!'); 
}); 

$('#test2').click(function(event) { 
    $(this).html('and I didnt scroll to the top!'); 
    return false; 
}); 

Et comme vous pouvez le voir, ils travaillent très bien.

Answer 2

$("#id_of_anchor").click(function(event) { 
    // ... 
    return false; 
} 

Answer 3

Cette question est plus d'un exercice de débogage car il est indiqué que vous utilisez les bonnes fonctions du jQuery Event object.

Dans un gestionnaire d'événements jQuery, vous pouvez effectuer, ou les deux, de deux choses fondamentales:

1. Prévenir le comportement par défaut de l'élément (A HREF = « n », dans votre cas) :

jQuery("#id_of_anchor").click(function(evt) { 
    // ... 
    evt.preventDefault(); // assuming your handler has "evt" as the first parameter 
    return false; 
} 

2. Arrêtez l'événement de se propager aux gestionnaires d'événements sur les éléments HTML environnants:

jQuery("#id_of_anchor").click(function(evt) { 
    // ... 
    evt.stopPropagation(); // assuming your handler has "evt" as the first parameter 
} 

Puisque vous n'êtes pas obtenir le comportement attendu, vous devez prendre l'appel ajax temporairement, le remplacer par un code anodin comme la création d'un valeur de formulaire, ou -shudder- alert ("OK") et testez si vous continuez à faire défiler vers le haut.

Answer 4

vous pouvez utiliser javascript: void (0); dans la propriété href.

Answer 5

J'ai eu le même problème.

Je pense que cela se produit lorsque vous liez l'événement avant d'ajouter l'élément au DOM.

Answer 6

Comme Tilal dit plus haut:

<a id="id_of_anchor" href="javascript:void(0)" /> 

maintient la balise d'ancrage regardant à droite, vous permet d'assigner des gestionnaires de cliquer pour avec javascript, et ne défile pas. Nous l'utilisons intensivement juste pour cette raison.

Answer 7

Cela m'a beaucoup aidé avec le code ci-dessous. Je vous remercie!

 $(document).ready(function() { 
     $(".dropdown dt a").click(function(event) { 
     event.preventDefault(); 
      $(".dropdown dd ul").toggle('slow'); 
     });   
     $(".dropdown dd ul li a").click(function(event) { 
     event.preventDefault(); 
      $(".dropdown dd ul").hide(); 
     }); 
    }); 

Answer 8

perdre juste le

href="#" 

Dans la balise html ... qui est ce qui provoque la page Web pour "sauter".

<a id="id_of_anchor"> link text </a> 

et souvenez-vous d'ajouter

cursor: pointer; 

à votre un css de sorte qu'il ressemble à un lien sur mouseover.

Bonne chance.