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

j'ai un <button> sur la page, quand ce bouton est appuyé un caché <div> est montré en utilisant jQuery.

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

1311
demandé sur Termininja 2009-07-17 21:59:09
la source

30 ответов

si vous n'avez pas besoin du changement pour animer, alors vous n'avez pas besoin d'utiliser de plugins Spéciaux - j'utiliserais simplement la fenêtre JavaScript native.méthode scrollTo -- passer à 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.
1800
répondu daniellmb 2014-06-27 19:10:52
la source

si vous voulez un défilement lisse, essayez quelque chose comme ceci:

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

qui prendra n'importe quelle étiquette <a> dont href="#top" et le fera défiler lisse vers le haut.

1201
répondu Mark Ursino 2011-03-18 02:27:49
la source

essayez ceci pour faire défiler en haut

<script>
 $(document).ready(function(){
    $(window).scrollTop(0);
});
</script>
134
répondu mehmood 2017-03-01 16:00:52
la source

vous n'avez pas besoin de jQuery pour faire ça. 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>
88
répondu Mathew 2009-07-17 22:51:12
la source

toutes ces suggestions fonctionnent très bien pour diverses situations. Pour ceux qui trouvent cette page par 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);
50
répondu D.Alexander 2012-04-23 13:53:12
la source

smooth scroll, pur javascript:

(function smoothscroll(){
    var currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
    if (currentScroll > 0) {
         window.requestAnimationFrame(smoothscroll);
         window.scrollTo (0,currentScroll - (currentScroll/5));
    }
})();
32
répondu wake-up-neo 2015-05-29 13:49:04
la source
<script>

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

en html

<a href="#top">go top</a>
26
répondu hasancse016 2014-02-14 20:44:35
la source

si vous voulez faire du défilement en douceur, essayez ceci:

$("a").click(function() {
     $("html, body").animate({ scrollTop: 0 }, "slow");
     return false;
});

une autre solution est la fenêtre JavaScript.méthode scrollTo:

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

paramètres:

  • valeur x est le pixel le long de l'axe horizontal.
  • y-value est le pixel le long de l'axe vertical.
23
répondu Gaurang Sondagar 2017-09-11 13:37:41
la source

avec window.scrollTo(0, 0); est très rapide

j'ai donc essayé L'exemple de la marque Ursino, mais dans Chrome rien ne se passe

et j'ai trouvé ce

$('.showPeriodMsgPopup').click(function(){
    //window.scrollTo(0, 0);
    $('html').animate({scrollTop:0}, 'slow');//IE, FF
    $('body').animate({scrollTop:0}, 'slow');//chrome, don't know if Safari works
    $('.popupPeriod').fadeIn(1000, function(){
        setTimeout(function(){$('.popupPeriod').fadeOut(2000);}, 3000);
    });
});

testé tous les 3 navigateurs et il fonctionne

j'utilise le plan CSS

c'est quand un client clique sur "Réserver Maintenant" bouton et n'a pas la période de location sélectionnée, se déplace lentement vers le haut où les calendriers sont et ouvre une div dialogue pointant vers les 2 champs, après 3sec il se fane

21
répondu Luiggi ZAMOL 2013-06-24 16:05:46
la source

a lot de utilisateurs recommande de sélectionner les balises html et body pour la compatibilité entre navigateurs, comme suit:

$('html, body').animate({ scrollTop: 0 }, callback);

cela peut vous faire trébucher si vous comptez sur votre rappel en cours d'exécution qu'une seule fois. Il sera en fait exécuté deux fois parce que vous avez sélectionné deux éléments.

Si c'est un problème pour vous, vous pouvez faire quelque chose comme ceci:

function scrollToTop(callback) {
    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, callback);
        return;
    }

    $('body').animate({ scrollTop: 0 }, callback);
}

la raison pour laquelle cela fonctionne est dans Chrome $('html').scrollTop() renvoie 0, mais pas dans d'autres navigateurs tels que Firefox.

si vous ne voulez pas attendre que l'animation soit terminée dans le cas où le scrollbar est déjà en haut, essayez ceci:

function scrollToTop(callback) {
    if ($('html').scrollTop()) {
        $('html').animate({ scrollTop: 0 }, callback);
        return;
    }

    if ($('body').scrollTop()) {
        $('body').animate({ scrollTop: 0 }, callback);
        return;
    }

    callback();
}
21
répondu David Kennedy 2017-05-23 14:54:59
la source

vraiment étrange: cette question est active depuis cinq ans maintenant et il n'y a toujours pas de réponse JavaScript vanille pour animer le défilement... alors voilà:

var scrollToTop = window.setInterval(function() {
    var pos = window.pageYOffset;
    if ( pos > 0 ) {
        window.scrollTo( 0, pos - 20 ); // how far to scroll on each step
    } else {
        window.clearInterval( scrollToTop );
    }
}, 16); // how fast to scroll (this equals roughly 60 fps)

si vous le souhaitez, vous pouvez l'envelopper dans une fonction et l'appeler via l'attribut onclick . Vérifier cette jsfiddle

Note: c'est une solution très basique et peut-être pas la plus performante. Un exemple très élaboré peut être trouvé ici: https://github.com/cferdinandi/smooth-scroll

19
répondu AvL 2014-10-02 14:00:53
la source

La vieille #top peut faire l'affaire

document.location.href = "#top";

Fonctionne très bien dans les FF, IE et Chrome

16
répondu pollirrata 2014-12-01 05:29:07
la source

Essayez cette

<script>
    $(window).scrollTop(100);
</script>
13
répondu Renjith 2011-12-01 10:59:01
la source

$(document).scrollTop(0); fonctionne aussi.

13
répondu Hari Ganesan 2012-08-01 00:53:52
la source
<script>
$(function(){
   var scroll_pos=(0);          
   $('html, body').animate({scrollTop:(scroll_pos)}, '2000');
});
</script>

Edit:

$('html, body').animate({scrollTop:(scroll_pos)}, 2000);
12
répondu Kamlesh 2018-10-08 09:08:50
la source

Non-jQuery solution / pur JavaScript:

document.body.scrollTop = document.documentElement.scrollTop = 0;
10
répondu tfont 2014-01-30 20:25:04
la source

cela fonctionnera:

window.scrollTo(0, 0);

9
répondu Santosh Jadi 2018-04-19 08:13:56
la source

essayez ce code:

$('html, body').animate({
    scrollTop: $("div").offset().top
}, time);

div => Dom Élément sur lequel vous souhaitez déplacer les faire défiler.

time = > millisecondes, définissez la vitesse du rouleau.

8
répondu Wasif Ale 2017-08-08 10:42:55
la source

pourquoi n'utilisez-vous pas la fonction incrustée JQuery scrollTop:

$('html, body').scrollTop(0);//For scrolling to top

$("body").scrollTop($("body")[0].scrollHeight);//For scrolling to bottom

court et simple!

7
répondu Sandeep Gantait 2016-03-20 12:42:31
la source

$(".scrolltop").click(function() {
  $("html, body").animate({ scrollTop: 0 }, "slow");
  return false;
});
.section{
 height:400px;
}
.section1{
  background-color: #333;
}
.section2{
  background-color: red;
}
.section3{
  background-color: yellow;
}
.section4{
  background-color: green;
}
.scrolltop{
  position:fixed;
  right:10px;
  bottom:10px;
  color:#fff;
}
<html>
<head>
<title>Scroll top demo</title>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
</head>
<body>
<div class="content-wrapper">
<div class="section section1"></div>
<div class="section section2"></div>
<div class="section section3"></div>
<div class="section section4"></div>
<a class="scrolltop">Scroll top</a>
</div>

</body>
</html>
7
répondu arvinda kumar 2018-07-14 10:45:01
la source

vous n'avez pas besoin de JQuery. Vous pouvez simplement appeler le script

window.location = '#'

, cliquez sur "Aller au dessus de la touche" "

exemple de démo:

output.jsbin.com/fakumo#

PS: n'utilisez pas cette approche, lorsque vous utilisez des bibliothèques modernes comme angularjs. Ça pourrait casser L'URL HASHBANG.

6
répondu Sriramajeyam Sugumaran 2016-07-25 18:01:07
la source

vous pouvez simplement utiliser une cible de votre lien, comme #someid, où #someid est l'id du div.

ou, vous pouvez utiliser n'importe quel nombre de plugins de défilement qui rendent cela plus élégant.

http://plugins.jquery.com/project/ScrollTo en est un exemple.

5
répondu ScottE 2009-07-17 22:09:20
la source

utilisez simplement ce script pour faire défiler vers le haut.

<script>
$(document).ready(function(){
    $("button").click(function(){
        ($('body').scrollTop(0));
    });
});
</script>
5
répondu Gayashan Perera 2017-09-27 14:31:35
la source

vous pouvez essayer D'utiliser JS comme dans ce violon http://jsfiddle.net/5bNmH/1 /

ajouter le bouton" haut de page "dans le pied de page:

<footer>
    <hr />
    <p>Just some basic footer text.</p>
    <!-- Go to top Button -->
    <a href="#" class="go-top">Go Top</a>
</footer>
4
répondu asertym 2014-02-01 23:35:47
la source

si vous ne voulez pas de scrolling lisse, vous pouvez tricher et arrêter l'animation de scrolling lisse à peu près dès que vous le commencez... comme ceci:

   $(document).ready(function() {
      $("a[href='#top']").click(function() {
          $("html, body").animate({ scrollTop: 0 }, "1");              
          $('html, body').stop(true, true);

          //Anything else you want to do in the same action goes here

          return false;                              
      });
  });

Je n'ai aucune idée si c'est recommandé/autorisé, mais cela fonctionne:)

quand utiliserez-vous ceci? Je ne suis pas sûr, mais peut-être quand vous voulez utiliser un clic pour animer une chose avec Jquery, mais faire une autre sans animation? c'est-à-dire ouvrir un panneau de connexion d'administrateur en haut de la page, et sautez immédiatement au sommet pour le voir.

4
répondu Jon Story 2014-06-23 22:18:05
la source
function scrolltop() {

    var offset = 220;
    var duration = 500;

    jQuery(window).scroll(function() {
        if (jQuery(this).scrollTop() > offset) {
            jQuery('#back-to-top').fadeIn(duration);
        } else {
            jQuery('#back-to-top').fadeOut(duration);
        }
    });

    jQuery('#back-to-top').click(function(event) {
        event.preventDefault();
        jQuery('html, body').animate({scrollTop: 0}, duration);
        return false;
    });
}
4
répondu Mardzis 2014-11-22 00:11:32
la source

aucune des réponses ci-dessus ne fonctionnera dans SharePoint 2016.

il faut faire comme ceci: https://sharepoint.stackexchange.com/questions/195870 /

var w = document.getElementById("s4-workspace");
w.scrollTop = 0;
4
répondu jeancallisti 2018-02-14 15:21:15
la source

Motivation

cette solution simple fonctionne nativement et implémente un scroll lisse à n'importe quelle position.

il évite d'utiliser des liens d'ancrage (ceux avec # ) qui, à mon avis, sont utiles si vous voulez lier à une section, mais ne sont pas si à l'aise dans certaines situations, en particulier lorsque vous pointez vers le haut qui pourrait conduire à deux URLs différentes pointant vers le même endroit ( http://www.example.org et http://www.example.org/# ).

Solution

mettez un id sur l'étiquette que vous voulez faire défiler, par exemple votre première section , qui répond à cette question, mais le id pourrait être placé partout dans la page.

<body>
  <section id="top">
    <!-- your content -->
  </section>
  <div id="another"><!-- more content --></div>

Puis comme un bouton, vous pouvez utiliser un lien, il suffit de modifier le onclick attribut avec un code comme celui-ci.

<a onclick="document.getElementById('top').scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })">Click me</a>

où l'argument de document.getElementById est le id de la balise que vous voulez faire défiler après avoir cliqué.

4
répondu Gianluca Casati 2018-05-09 11:57:29
la source

Active tous les navigateurs. Bonne chance

var process;
        var delay = 50; //milisecond scroll top
        var scrollPixel = 20; //pixel U want to change after milisecond
        //Fix Undefine pageofset when using IE 8 below;
        function getPapeYOfSet() {
            var yOfSet = (typeof (window.pageYOffset) === "number") ? window.pageYOffset : document.documentElement.scrollTop;
            return yOfSet;
        }



        function backToTop() {
            process = setInterval(function () {
                var yOfSet = getPapeYOfSet();
                if (yOfSet === 0) {
                    clearInterval(process);
                } else {
                    window.scrollBy(0, -scrollPixel);
                }
            }, delay);
        }
3
répondu Anh Tran 2015-10-19 06:22:13
la source

Essayez cette

<script>
  $(function(){
   $('a').click(function(){
    var href =$(this).attr("href");
   $('body, html').animate({
     scrollTop: $(href).offset().top
     }, 1000)
  });
 });
 </script>
3
répondu Eugeni Bejan 2015-12-28 01:18:06
la source

Autres questions sur javascript jquery scroll