web-dev-qa-db-fra.com

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é, un <div> caché est affiché avec 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 saute instantanément vers le haut. Je ne cherche pas un défilement en douceur.

javascriptjqueryscroll
1383
KingNestor

Si vous n'avez pas besoin du changement pour animer, vous n'avez pas besoin d'utiliser de plugins spéciaux - je n'utiliserais que la méthode JavaScript native window.scrollTo - le passage 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. 
  • la coordonnée y est le pixel le long de l'axe vertical. 
1894
daniellmb

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 prend n'importe quelle balise <a> dont href="#top" et le rend lisse défiler vers le haut.

1250
Mark Ursino

Essayez ceci pour faire défiler vers le haut 

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

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>
92
Mathew

Toutes ces suggestions fonctionnent très bien pour diverses situations. Pour ceux qui trouvent cette page à travers une recherche, on peut aussi essayer ceci un essai. JQuery, pas de plug-in, allez à element.

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

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));
    }
})();
36
wake-up-neo

Meilleure solution avec une animation fluide:

// this changes the scrolling behavior to "smooth"
window.scrollTo({ top: 0, behavior: 'smooth' });

Référence: https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo#Example

29
Ganesh Ghalame

Si vous voulez faire du défilement régulier, essayez ceci:

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

Une autre solution est la méthode JavaScript window.scrollTo:

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

Paramètres :

  • la valeur x est le pixel le long de l'axe horizontal.
  • la valeur y est le pixel le long de l'axe vertical.
28
Gaurang Sondagar
<script>

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

en html

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

Avec window.scrollTo(0, 0); c'est très rapide
J'ai donc essayé l'exemple de Mark Ursino, mais rien ne se passe dans Chrome
.__ et j'ai trouvé ça

$('.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 cela fonctionne
J'utilise blueprint css
C’est quand un client clique sur le bouton "Réserver maintenant" et que la période de location n’est pas sélectionnée, se déplace lentement vers le haut, où se trouvent les calendriers, et ouvre une boîte de dialogue pointant vers les 2 champs. Après 3 secondes, elle s’efface.

24
Luiggi ZAMOL

Vraiment étrange: cette question est active depuis cinq ans maintenant et il n’existe toujours pas de réponse JavaScript à la vanille pour animer le défilement…

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 envelopper cette fonction dans une fonction et l'appeler via l'attribut onclick. Vérifiez ceci jsfiddle

Note: Ceci 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

23
AvL

Un lotofusers 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. En fait, il se déroulera deux fois car vous avez sélectionné deux éléments.

Si cela vous pose un problème, 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 la fin de l'animation si la barre de défilement 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();
}
22
David Kennedy

L'ancien #top peut faire l'affaire 

document.location.href = "#top";

Fonctionne bien dans FF, IE et Chrome

17
pollirrata
<script>
$(function(){
   var scroll_pos=(0);          
   $('html, body').animate({scrollTop:(scroll_pos)}, '2000');
});
</script>

Modifier:

$('html, body').animate({scrollTop:(scroll_pos)}, 2000);
16
Kamlesh

Essaye ça

<script>
    $(window).scrollTop(100);
</script>
14
Renjith

$(document).scrollTop(0); fonctionne également.

14
Hari Ganesan

Solution non jQuery/JavaScript pur:

document.body.scrollTop = document.documentElement.scrollTop = 0;
12
tfont

Cela fonctionnera:

window.scrollTo(0, 0);

10
Santosh Jadi

Essayez ce code:

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

div => Dom Élément vers lequel vous souhaitez déplacer défiler.

time => milliseconds, définissez la vitesse du défilement.

10
Wasif Ali

$(".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>

10
arvinda kumar

Pourquoi n'utilisez-vous pas la fonction incorporée JQuery scrollTop:

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

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

Court et simple!

8
Sandeep Gantait

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

<script>
$(document).ready(function(){
    $("button").click(function(){
        ($('body').scrollTop(0));
    });
});
</script>
8
Gayashan Perera

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

window.location = '#'

en cliquant sur le bouton "Go to top"

Exemple de démo: 

output.jsbin.com/fakumo#

PS: N'utilisez pas cette approche lorsque vous utilisez des bibliothèques modernes telles que angularjs. Cela pourrait casser l'URL hashbang.

7
Sriramajeyam Sugumaran

Si vous ne voulez pas de défilement régulier, vous pouvez tricher et arrêter l'animation de défilement régulier dès que vous la démarrez ... 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 ne sais pas si c'est recommandé/autorisé, mais ça marche :)

Quand utiliseriez-vous cela? Je ne suis pas sûr, mais vous pouvez peut-être utiliser un clic pour animer une chose avec Jquery, mais en faire une autre sans animation? C'est-à-dire ouvrez un panneau de connexion d'administrateur coulissant en haut de la page et accédez instantanément au sommet pour le voir.

6
Jon Story

Motivation

Cette solution simple fonctionne de manière native et implémente un défilement régulier dans n’importe quelle position.

Cela évite d'utiliser des liens d'ancrage (ceux avec #) qui, à mon avis, sont utiles si vous souhaitez créer un lien vers une section, mais ne sont pas très à l'aise dans certaines situations, en particulier lorsque vous pointez vers le haut, ce qui peut entraîner deux URL différentes au même endroit (http://www.example.org et http://www.example.org/#).

Solution

Placez un id sur la balise vers laquelle vous souhaitez faire défiler, par exemple votre première section, qui répond à cette question, mais le id peut être placé partout dans la page.

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

Ensuite, comme bouton, vous pouvez utiliser un lien, éditez simplement l'attribut onclick 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 souhaitez faire défiler après clic.

6
Gianluca Casati

Vous pouvez simplement utiliser une cible de votre lien, telle que #someid, où #someid est l'identifiant de la 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 est un exemple.

5
ScottE

Vous pouvez essayer d'utiliser JS comme dans ce Fiddle http://jsfiddle.net/5bNmH/1/

Ajoutez le bouton "Go to top" 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
asertym

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

Cela doit être fait comme ceci: https://sharepoint.stackexchange.com/questions/195870/

var w = document.getElementById("s4-workspace");
w.scrollTop = 0;
4
jeancallisti
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
Mardzis

Activer tout le navigateur. 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
Anh Tran

Essaye ça

<script>
  $(function(){
   $('a').click(function(){
    var href =$(this).attr("href");
   $('body, html').animate({
     scrollTop: $(href).offset().top
     }, 1000)
  });
 });
 </script>
3
Eugeni Bejan

Si vous souhaitez faire défiler un élément avec un ID, essayez ceci:

$('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();
    var target = this.hash;
    $target = $(target);
    $('html, body').stop().animate({
        'scrollTop': $target.offset().top
    }, 700, 'swing', function () {
        window.location.hash = target;
    });
});``
2
Alan Kael Ball

Lorsque le défilement supérieur est inférieur au maximum inférieur à la limite inférieure et inférieure, l'en-tête est permanent. Ci-dessous, voir Fiddle Exemple.

var lastScroll = 0;

$(document).ready(function($) {

$(window).scroll(function(){

 setTimeout(function() { 
    var scroll = $(window).scrollTop();
    if (scroll > lastScroll) {

        $("header").removeClass("menu-sticky");

    } 
    if (scroll == 0) {
    $("header").removeClass("menu-sticky");

    }
    else if (scroll < lastScroll - 5) {


        $("header").addClass("menu-sticky");

    }
    lastScroll = scroll;
    },0);
    });
   });

https://jsfiddle.net/memdumusaib/d52xcLm3/

1
Musaib Memdu

Juste essayer, pas besoin d'autre plugin/frameworks 

document.getElementById("jarscroolbtn").addEventListener("click", jarscrollfunction);

function jarscrollfunction() {
  var body = document.body; // For Safari
  var html = document.documentElement; // Chrome, Firefox, IE and Opera 
  body.scrollTop = 0; 
  html.scrollTop = 0;
}
<button id="jarscroolbtn">Scroll contents</button> 
html, body {
  scroll-behavior: smooth;
}
0
rajmobiapp

Pour faire défiler l'élément et l'élément se trouvant en haut de la page

WebElement tempElement=driver.findElement(By.cssSelector("input[value='Excel']"));

            ((JavascriptExecutor) driver).executeScript("arguments[0].scrollIntoView(true);", tempElement);
0
Priyanka

2019,

à éviter “Ce site semble utiliser un effet de positionnement lié au défilement. Cela risque de ne pas bien fonctionner avec le panoramique asynchrone ", utilisez mon script

https://stackoverflow.com/a/57641938/578132

0
Constantin