Éviter de la fenêtre de sauter de haut en cliquant #-liens

J'ai une page avec quelques questions et réponses, les réponses sont réduits par défaut. Lorsqu'ils cliquent sur la question que je développez le caché réponse-div. Le problème est que lorsque je clique sur ces questions, la fenêtre de sauter vers le haut de l'écran. Ce n'est pas un énorme problème, mais je trouve que c'est gênant, parce que j'ai faites défiler jusqu'à nouveau la question.

Les liens ressemble simplement à ceci:

<a href="#" id="myID">Myquestion</a>

Et j'ai utilisé jQuery et .click comme écouteur d'événement.

Existe-il des moyens simples pour éviter cela, ou dois-je utiliser .scroll et de trouver les coordonnées de la question? Je préfère l'éviter.

EDIT: je sais que je peux utiliser des ancres pour ce faire, mais je voudrais éviter tout saut de l'écran à tous.

InformationsquelleAutor OptimusCrime | 2011-11-23
  1. 25

    Vous devez ajouter preventDefault() à votre gestionnaire de clic. Cela va arrêter le navigateur de l'exécution de son propre lien de gestionnaire et va exécuter le code que vous spécifiez.

    Exemple:

    $("#myID").click(function(e) {
    e.preventDefault();
    //Do your stuff
});
    • Ah, bien sûr. Je suis tellement stupide. Mais cela ne fonctionne pas dans IE7. Je tiens à ajouter le support pour IE7 et/ou IE8. Est-il possible de le faire?
    • Mauvaise recherche par moi-même, j'ai trouvé ça dans une autre question if(e.preventDefault){ e.preventDefault()} else{e.stop()}; Grâce. L'affaire est close.
    • preventDefault() devrait fonctionner dans tous les navigateurs si vous êtes à l'aide de jQuery. Vous pouvez aussi simplement return false à partir de votre gestionnaire d'événement.
    • Eh bien, pour une raison quelconque, il ne fonctionne pas dans les anciennes versions d'IE
    • Ayant le même problème avec IE7 sur sauter les liens ne fonctionne pas avec des e.preventDefault();
    InformationsquelleAutor Rory McCrossan
  2. 5

    N'utilisez pas de balises pour les tâches qui ne sont pas reliées à la navigation. Il n'est pas balisage sémantique, et de ne pas dégrader gracieusement. Utilisez les boutons de la place.

    • Bonne idée, le problème est que le texte lui-même doit être le lien, à cet effet, je ne voulais pas aller pour le bouton. Mais je pense qu'il serait plus à utiliser un span ou quelque chose d'autre. Je vais garder cela à l'esprit la prochaine fois, n'est pas à réécrire l'ensemble de mon analyseur.
    InformationsquelleAutor Jonas Høgh
  3. 4

    Vous pouvez le faire très simple:
    Juste ajouter ! à la fin de votre href:

    <a href="#!" id="myID">Myquestion</a>

    L'alternative jQuery moyens sont:

    $("#myID").click(function(e) {
    e.preventDefault(); //one way 
    return false; //second way prevent default click action from happening
});
    InformationsquelleAutor David
  4. 2
    $("#myID").click(function(e) {
    if(e.preventDefault)
        e.preventDefault();
    else
        e.stop();
});

    e.preventDefault()seul ne fonctionne pas dans les anciennes versions d'IE.

    • En fait l'utilisation de l'e.stop() fonctionnent très bien, donc pas besoin pour ça, si
    InformationsquelleAutor OptimusCrime
  5. 2

    En fait, la meilleure façon de le faire est de supprimer l'attribut href de votre balise d'ancrage. Grâce à HTML5, balises d'ancrage n'avez pas besoin d'inclure des attributs href être sémantique.

    Donc

    <a id="myID">Myquestion</a>

    au lieu de

    <a href="#" id="myID">Myquestion</a>

    Cela fonctionne dans IE8+, Chrome et Firefox. Remarque :le lien de styles css ne s'appliquent pas à l'ancrage des balises qui ne sont pas des attributs href.

    Si vous avez besoin de l'attribut href et/ou de compatibilité IE7, puis 

    $("#myID").click(function(e) {
    if(e.preventDefault)
        e.preventDefault();
    else
        e.stop();
});

    est probablement la meilleure façon d'aller.

    InformationsquelleAutor craignewkirk
  6. 1
    $('a').click( function() {
  if ($(this).attr("href") == window.location.hash) {
    event.preventDefault()
  }
});
    InformationsquelleAutor zamuka
  7. 0

    Vous êtes à la recherche pour event.preventDefault (voir jQuery API).

    $(...).click(function(e) {
  e.preventDefault();
  //your code
});
    InformationsquelleAutor Marcel Jackwerth
  8. 0

    Exemple avec de belles défilement pour répondre contenu:

    $("#question_title").click(function(){
  var $answer=$("#answer");
  $answer.slideDown();
  $.scrollTo( $answer, 800 );
  return false;
});

    Je suis utilisé jQuery scrollTo plugin.

    InformationsquelleAutor rogal111
  9. 0

    À l'intérieur de votre fonction de:

    And I've used jQuery and .click as event-listener.

    Ressemblera à quelque chose comme:

    $("#myID").click(function(){});

    Changer cela (n'oubliez pas les param e à l'intérieur function(e):

    $("#myID").click(function(e){
    e.preventDefault();
});
    InformationsquelleAutor Niels
  10. 0

    $('body').on('click', '[href^=#]', function (e) {
    e.preventDefault()
    });

    si le sélecteur ex.."corps" est-il lors de la première de rendre, puis utilisez l'une de sélecteur .. id ... pour cible le général de jQuery (comme des 1.8.2) itérer sur. le "gestionnaire d'invoquer une méthode dite de "lier", qui est utilisé pour le nouvellement ajouté de contenu pour les DOM",. À l'aide de la "[href^=#] va sélectionner tout href qui sont dans la section tag, mais vous pouvez remplacer l'article avec tout ou rien, et il s'applique à une annulation de l'événement click. Cette technique est idéal pour créer dynamiquement des contenus vers les DOM

    InformationsquelleAutor Cain
  11. 0

    Si vous ajoutez un "\" pour le "#" ça va l'empêcher d'aller vers le haut.

    <a href="#\" id="myID">Myquestion</a>
    InformationsquelleAutor Nuno cruz
  12. 0

    HTML:

    <a id="like-post" href="#\">like</a>

    JavaScript:

    $('body').delegate('#like-post','click',function(e) {
     e.preventDefault();
     .....
});
    • Pourquoi voudriez-vous 1) répondre à une question qui a accepté de répondre à presque 6 ans? 2) utiliser un amortis méthode dans votre réponse?
    InformationsquelleAutor وديع مسافر