web-dev-qa-db-fra.com

la méthode jQuery scrollTop () ne fonctionne pas

J'ai le code jQuery suivant

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

où 'navtoTop' est la classe du bouton (quelque chose comme 'Back to top') qui a la position fixe en bas à gauche de la page et 'topofthePage' est l'id du <div> tout en haut de la page.

J'ai même essayé cela

$('.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 ne va pas, mais ça ne marche pas. Est-ce que quelqu'un va expliquer et donner une bonne solution? 

Demandez-moi le détail du code si vous voulez.

javascriptjqueryhtmlcssscroll
6
MD Danish Ansari

Vous devez utiliser window au lieu de html:

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

Notez que window ne doit pas être placé entre guillemets car c’est un objet et non une balise.

9
taxicala

Un problème courant avec scrollTo est le dépassement de capacité défini sur l'élément "html, body" dans css. Rarement mentionné lorsqu’il ya des problèmes de défilement/animation sur des éléments html/body et peut aboutir à une sur-ingénierie excessive. 

Si le dépassement de capacité doit être défini, placez-le uniquement sur l'élément body . Pas tous les deux html, body.

C'est également une bonne habitude d'utiliser un attribut data- * à la place de classes ou d'identifiants dans votre code HTML. Cela vous donne l’habitude de séparer les styles du code. Considérez ceci pour vous rendre la vie plus facile à l'avenir:

Créer une fonction de défilement réutilisable 

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éez des attributs de données pour les éléments HTML (nom-donnée est arbitraire et devrait avoir un sens):

AJOUTER UN LIEN HTML 

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

AJOUTER UN ELEMENT HTML 

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

VERIFY CSS »Le débordement ajouté à" html, body "ne fonctionnera pas

body { overflow-x: hidden; }

INIT FUNCTION ON READY »Initialise sur doc ready avec sélecteur de nom d'attribut pour créer de la flexibilité pour plusieurs appels

scrollioreceiver('[data-sender]');

J'espère que cela t'aides! 

3
CR Rollyson

Vous avez déjà une réponse à ce sujet. Mais comme vous souhaitez également un défilement régulier, envisagez l’alternative suivante:

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