Question Faites défiler vers le haut de la page en utilisant JavaScript / jQuery?


J'ai un <button> sur la page, lorsque ce bouton est enfoncé <div> est montré en utilisant jQuery.

Comment puis-je faire défiler vers le haut de la page en utilisant une commande JavaScript / jQuery dans cette fonction? C'est souhaitable même si la barre de défilement saute instantanément vers le haut. Je ne cherche pas un défilement lisse.


1271
2017-07-17 17:59


origine


Réponses:


Si vous n'avez pas besoin de la modification pour animer, vous n'avez pas besoin d'utiliser de plugins spéciaux - j'utiliserais simplement la méthode JavaScript native.scrollTo - passer en 0.0 fera défiler la page en haut à gauche instantanément .

window.scrollTo(x-coord, y-coord);

Paramètres

  • x-coord est le pixel le long de l'axe horizontal.
  • y-coord est le pixel le long de l'axe vertical.

1741
2017-07-17 18:42



Si vous voulez un défilement régulier, essayez quelque chose comme ceci:

$("a[href='#top']").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});

Cela prendra tout <a> tag dont href="#top" et faites-le défiler vers le haut.


1177
2017-07-17 19:43



Essayez ceci pour faire défiler vers le haut

<script>
 $(document).ready(function(){
    $(window).scrollTop(0);
});
</script>

123
2018-05-21 07:45



Vous n'avez pas besoin de jQuery pour le faire. Une balise HTML standard suffira ...

<div id="jump_to_me">
    blah blah blah
</div>

<a target="#jump_to_me">Click Here To Destroy The World!</a>

82
2017-07-17 18:51



Toutes ces suggestions fonctionnent très bien pour diverses situations. Pour ceux qui trouvent cette page grâce à une recherche, on peut aussi donner ce un essai. JQuery, pas de plug-in, faites défiler jusqu'à l'élément.

$('html, body').animate({
    scrollTop: $("#elementID").offset().top
}, 2000);

47
2018-04-23 09:53



défilement lisse, javascript pur:

(function smoothscroll(){
    var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
    if (currentScroll > 0) {
         window.requestAnimationFrame(smoothscroll);
         window.scrollTo (0,currentScroll - (currentScroll/5));
    }
})();

29
2018-05-29 10:49



<script>

  $("a[href='#top']").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
  });
</script>

en html

<a href="#top">go top</a>

25
2018-02-14 16:44