jQuery scrollTop() la méthode ne fonctionne pas

J'ai le texte suivant jQuery code

$(document).ready(function () {
    $('.navtoTop').click(function(){
           $("html").scrollTop( $("#topofthePage").offset().top );
    }); 
});

où "navtoTop' est la classe du bouton(quelque chose comme "haut de page") qui a la position fixe dans le coin inférieur gauche de la page et "topofthePage' est l'id de la <div> au plus haut de ma page.

J'ai même essayé ce

$('.navtoTop').click(function(){
    $('html, body').animate({scrollTop : 0},800);
    return false;
});

Voici le code html

<body>
    <div id="topofthePage"></div>
    ...
    ...
    <img src="navtoTop.png" class="navtoTop">   
</body>

Je ne sais pas ce qui se passe mal, mais ce n'est pas de travail. Quelqu'un expliquer et de donner une bonne solution?

Me demander le détail de code si vous le souhaitez.

  • Montre-nous ton code html
  • découvrez j'ai mis à jour le québec...
  • Je pense que vous avez déjà une réponse qui devrait fonctionner ... une autre alternative à $.scrollTop() l'utilisation peut être la modification de la window.location d'utiliser un fragment de hachage. Comme ceci: window.location += '#topofthePage';
  • génial fonctionne, mais peut-on mettre en œuvre des ce avec l'animer pour un défilement lisse.
  • Non, nous avons besoin d'une approche différente ... tout simplement posté une réponse, voir ci-dessous
InformationsquelleAutor MD Danish Ansari | 2015-08-28
  1. 15

    Vous devez utiliser window au lieu de html:

    $(window).scrollTop( $("#topofthePage").offset().top );

    Noter que window ne doit pas être placé entre guillemets, comme j'en garde un objet et non une balise.

    • Il est à droite. vous devez utiliser $(window) au lieu de $("html"). Cette déclaration corps de défilement de la barre de défilement.
    • + J'ai vu quelques bases de code où il est $('body'). Il devrait être remplacé par $(window).
    InformationsquelleAutor taxicala
  2. 5

    Une commune scrollTo problème est d'avoir de dépassement de jeu sur le "html, body" élément en css. Rarement mentionné lorsque le défilement/animation de questions sur le langage html/éléments de carrosserie et peuvent finir excessive de l'ingénierie.

    Si dépassement doit être établi, le mettre sur le corps de l'élément de. Pas les deux en html,body.

    C'est aussi une bonne habitude d'utiliser des données* attribut en place de classes ou Id dans votre code html. Cela vous arrive dans l'habitude de séparer les styles de code. Considérez ceci pour rendre votre vie plus facile dans l'avenir:

    Créer Réutilisables Fonction De Défilement

    scrollioreceiver = function(sender) {

  $(sender).on({
    click: sentFrom
  });

  function sentFrom(){
    var dataMine = $(this).attr('data-sender'),
        dataSend = $('[data-receiver="'+dataMine+'"]');

    $('html, body').animate({
        scrollTop: $(dataSend).offset().top - 70
    }, 800, function() {
        //if you need a callback function
    });
  }
}

    Créer des attributs de données pour les éléments html (data-nom est arbitraire et doit faire sens):

    AJOUTER UN LIEN HTML

    <a data-sender="ScrollToMatch">Link To Click To Scroll To Match Attribute</a>

    AJOUTER UN ÉLÉMENT HTML

    <div data-receiver="ScrollToMatch">Scrolls To This Element</div>

    VÉRIFIER CSS
    » dépassement ajouté à "html,au corps" ne fonctionne pas

    body { overflow-x: hidden; }

    FONCTION INIT SUR PRÊT
    » initialiser sur la doc prêt avec le nom de l'attribut du sélecteur de créer une souplesse sur les appels multiples

    scrollioreceiver('[data-sender]');

    Espérons que cette aide!

    InformationsquelleAutor CR Rollyson
  3. 2

    Vous déjà eu une réponse sur ce point. Mais, puisque vous aussi vous voulez un défilement lisse, considérez les alternatives suivantes:

    $('.navtoTop').click(function(){
    $('html, body').animate({
        scrollTop: $('#topofthePage').offset().top
    }, 1000);
});
    InformationsquelleAutor leo.fcx
  4. -1

    Meilleure façon de l'utiliser:

    $(document).ready(function () {
    $('.navtoTop').click(function(){
          $(window).scrollTop()
          $("window").scrollTop( $("#topofthePage").offset().top );
    }); 
});
    InformationsquelleAutor Mbj web-development