web-dev-qa-db-fra.com

Comment faire défiler vers le haut de la page avec JavaScript/jQuery?

Existe-t-il un moyen de contrôler le défilement du navigateur avec JavaScript/jQuery?

Lorsque je fais défiler ma page à mi-chemin, puis que je déclenche un rechargement, je souhaite que la page soit complètement remplie, mais au lieu de cela, il essaie de trouver la dernière position de défilement. Alors j'ai fait ça:

$('document').ready(function() {
   $(window).scrollTop(0);
});

Mais pas de chance.

MODIFIER:

Donc, vos deux réponses ont fonctionné lorsque je les ai appelées après le chargement de la page - Merci. Cependant, si je fais juste une actualisation de la page, le navigateur calcule et fait défiler l'écran jusqu'à son ancienne position de défilement APRÈS l'événement .ready (j'ai également testé la fonction body onload ()).

La suite est donc la suivante: existe-t-il un moyen d'empêcher le navigateur de revenir à sa position passée, ou de revenir au début après avoir terminé?

javascriptjqueryhtmlscroll
137
Yarin

Solution JavaScript pure inter-navigateurs:

document.body.scrollTop = document.documentElement.scrollTop = 0;
278
Niet the Dark Absol

Vous presque avez compris - vous devez définir scrollTop sur body et non window:

$(function() {
   $('body').scrollTop(0);
});

MODIFIER:

Peut-être que vous pouvez ajouter une ancre vierge en haut de la page:

$(function() {
   $('<a name="top"/>').insertBefore($('body').children().eq(0));
   window.location.hash = 'top';
});
83
Jacob Relkin

Existe-t-il un moyen d'empêcher le navigateur faire défiler jusqu'à sa position passée, ou à re-faites défiler vers le haut APRÈS avoir fait son chose?

La solution jQuery suivante fonctionne pour moi:

$(window).unload(function() {
    $('body').scrollTop(0);
});
16
Matt

Voici une version pure de défilement animé par JavaScript pour les non-jQuery'ers: D

var stepTime = 20;
var docBody = document.body;
var focElem = document.documentElement;

var scrollAnimationStep = function (initPos, stepAmount) {
    var newPos = initPos - stepAmount > 0 ? initPos - stepAmount : 0;

    docBody.scrollTop = focElem.scrollTop = newPos;

    newPos && setTimeout(function () {
        scrollAnimationStep(newPos, stepAmount);
    }, stepTime);
}

var scrollTopAnimated = function (speed) {
    var topOffset = docBody.scrollTop || focElem.scrollTop;
    var stepAmount = topOffset;

    speed && (stepAmount = (topOffset * stepTime)/speed);

    scrollAnimationStep(topOffset, stepAmount);
};

Et alors:

<button onclick="scrollTopAnimated(1000)">Scroll Top</button>
15
ulfryk

Cela fonctionne pour moi:

window.onload = function() {
    // short timeout
    setTimeout(function() {
        $(document.body).scrollTop(0);
    }, 15);
};

Utilise une setTimeout courte dans la onload pour donner au navigateur une chance de faire le défilement.

8
user113716

Vous pouvez utiliser avec jQuery

jQuery(window).load(function(){

    jQuery("html,body").animate({scrollTop: 100}, 1000);

});
7
Chanderkesh Kumar

METTRE &AGRAVE; JOUR

Aller en haut de la page avec un effet de défilement est un peu plus facile en javascript avec:

_ { https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll } _

window.scroll({
 top: 0, 
 left: 0, 
 behavior: 'smooth' 
});

MISE EN GARDE

Nous l'utilisons dans nos projets plus récents, mais je viens de vérifier la doc mozilla tout en mettant à jour ma réponse et je pense qu'elle a été mise à jour. À l'heure actuelle, la méthode est window.scroll(x-coord, y-coord) et ne mentionne ni ne montre d'exemples utilisant le paramètre object, dans lequel vous pouvez définir behavior sur smooth. Je viens d'essayer le code et cela fonctionne toujours dans chrome et firefox et le paramètre object est toujours dans le spec .

Donc, utilisez ceci avec précaution ou vous pouvez utiliser ceci Polyfill . En plus de faire défiler vers le haut, ce polyfill gère également d'autres méthodes: window.scrollBy, element.scrollIntoView, etc.

ANCIENNE RÉPONSE

Ceci est notre implémentation Vanilla javascript. Il a un effet d’atténuation simple afin que l’utilisateur ne soit pas choqué après un clic sur le bouton To Top.

C'est très petit et devient encore plus petit quand minified. Les développeurs cherchant une alternative à la méthode jQuery mais voulant obtenir les mêmes résultats peuvent essayer ceci.

JS

document.querySelector("#to-top").addEventListener("click", function(){

    var toTopInterval = setInterval(function(){

        var supportedScrollTop = document.body.scrollTop > 0 ? document.body : document.documentElement;

        if (supportedScrollTop.scrollTop > 0) {
            supportedScrollTop.scrollTop = supportedScrollTop.scrollTop - 50;
        }

        if (supportedScrollTop.scrollTop < 1) {
            clearInterval(toTopInterval);
        }

    }, 10);

},false);

HTML

<button id="to-top">To Top</button>

À votre santé!

7
Jo E.

Utilisez la fonction suivante

window.scrollTo(xpos, ypos)

Ici, xpos est requis. La coordonnée à faire défiler, le long de l'axe des x (horizontal), en pixels

ypos est également requis. La coordonnée à faire défiler, le long de l’axe des y (vertical), en pixels

5
Shoaib Quraishi
$(function() {
    // the element inside of which we want to scroll
        var $elem = $('#content');

        // show the buttons
    $('#nav_up').fadeIn('slow');
    $('#nav_down').fadeIn('slow');  

        // whenever we scroll fade out both buttons
    $(window).bind('scrollstart', function(){
        $('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
    });
        // ... and whenever we stop scrolling fade in both buttons
    $(window).bind('scrollstop', function(){
        $('#nav_up,#nav_down').stop().animate({'opacity':'1'});
    });

        // clicking the "down" button will make the page scroll to the $elem's height
    $('#nav_down').click(
        function (e) {
            $('html, body').animate({scrollTop: $elem.height()}, 800);
        }
    );
        // clicking the "up" button will make the page scroll to the top of the page
    $('#nav_up').click(
        function (e) {
            $('html, body').animate({scrollTop: '0px'}, 800);
        }
    );
 });

Utilisez ceci

5
Ekin Ertaç

Ma solution Javascript pure (animée):

function gototop() {
    if (window.scrollY>0) {
        window.scrollTo(0,window.scrollY-20)
        setTimeout("gototop()",10)
    }
}

Explication:

window.scrollY est une variable gérée par le navigateur indiquant le nombre de pixels à partir du haut avec lequel la fenêtre a défilé.

window.scrollTo(x,y) est une fonction qui fait défiler la fenêtre d’une quantité spécifique de pixels sur l’axe des x et sur l’axe des y.

Ainsi, window.scrollTo(0,window.scrollY-20) déplace la page de 20 pixels vers le haut.

setTimeout appelle la fonction à nouveau dans 10 millisecondes afin que nous puissions ensuite la déplacer de 20 pixels supplémentaires (animé), et l'instruction if vérifie s'il faut encore faire défiler.

4
Toastrackenigma

Le code suivant fonctionne dans Firefox, Chrome et Safari , mais je n'ai pas pu le tester dans Internet Explorer. Est-ce que quelqu'un peut le tester, puis éditer ma réponse ou commenter?

$(document).scrollTop(0);
4
bigblind

Cross-browser scroll to top: 

        if($('body').scrollTop()>0){
            $('body').scrollTop(0);         //Chrome,Safari
        }else{
            if($('html').scrollTop()>0){    //IE, FF
                $('html').scrollTop(0);
            }
        }

Faites défiler le navigateur pour atteindre un élément avec id = div_id: 

        if($('body').scrollTop()>$('#div_id').offset().top){
            $('body').scrollTop($('#div_id').offset().top);         //Chrome,Safari
        }else{
            if($('html').scrollTop()>$('#div_id').offset().top){    //IE, FF
                $('html').scrollTop($('#div_id').offset().top);
            }
        }
3
Binod

Pourquoi n'utilisez-vous pas un élément de référence au tout début de votre fichier html, comme 

<div id="top"></div>

et ensuite, quand la page se charge, il suffit de faire

$(document).ready(function(){

    top.location.href = '#top';

});

Si le navigateur fait défiler après cette fonction est activée, vous ne faites que

$(window).load(function(){

    top.location.href = '#top';

});
3
arik

Cela fonctionne:

jQuery(document).ready(function() {
     jQuery("html").animate({ scrollTop: 0 }, "fast");
});
2
srdjanprpa

La combinaison de ces deux m'a aidé. Aucune des autres réponses ne m'a aidé puisque j'avais un Sidenav qui ne défilait pas.

 setTimeout(function () {
        window.scroll({
                        top: 0,
                        left: 0,
                        behavior: 'smooth'
                    });

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

}, 15);
2
shailesh gavathe

Si vous êtes en mode quirks (merci @Niet the Dark Absol):

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

Si vous êtes en mode strict:

document.documentElement.scrollTop = 0;

Pas besoin de jQuery ici.

2
Zlatan

Dans mon cas, le corps n'a pas fonctionné:

$('body').scrollTop(0);

Mais le HTML a fonctionné:

$('html').scrollTop(0);
2
Sachin Prasad

Pour répondre à votre question modifiée, vous pouvez enregistrer le gestionnaire onscroll comme suit:

document.documentElement.onscroll = document.body.onscroll = function() {
    this.scrollTop = 0;
    this.onscroll = null;
}

Cela fera en sorte que la première tentative de défilement (qui est probablement celle automatique effectuée par le navigateur) soit effectivement annulée.

2
Niet the Dark Absol
var totop = $('#totop');
totop.click(function(){
 $('html, body').stop(true,true).animate({scrollTop:0}, 1000);
 return false;
});

$(window).scroll(function(){
 if ($(this).scrollTop() > 100){ 
  totop.fadeIn();
 }else{
  totop.fadeOut();
 }
});

<img id="totop" src="img/arrow_up.png" title="Click to go Up" style="display:none;position:fixed;bottom:10px;right:10px;cursor:pointer;cursor:hand;"/>
1
user3178603

Si quelqu'un utilise un design angulaire et matériel avec sidenav. Cela vous enverra en haut de la page:

let ele = document.getElementsByClassName('md-sidenav-content');
    let eleArray = <Element[]>Array.prototype.slice.call(ele);
    eleArray.map( val => {
        val.scrollTop = document.documentElement.scrollTop = 0;
    });
1
Helzgate

sans animation, juste scroll(0, 0) (Vanilla JS)

1
maxbellec
 <script>
  sessionStorage.scrollDirection = 1;//create a session variable 
  var pageScroll = function() {
  window.scrollBy ({
   top: sessionStorage.scrollDirection,
   left: 0,
   behavior: 'smooth'
   });
   if($(window).scrollTop() + $(window).height() > $(document).height() - 1)
  {    
    sessionStorage.scrollDirection= Number(sessionStorage.scrollDirection )-300;
    setTimeout(pageScroll,50);//
   }
   else{
   sessionStorage.scrollDirection=Number(sessionStorage.scrollDirection )+1
   setTimeout(pageScroll,300); 
  }
};
pageScroll();
</script>
0
Kenrick Humber

Seeint le hash devrait faire le travail. Si vous avez un en-tête, vous pouvez utiliser 

window.location.href = "#headerid";

sinon, seul le # fonctionnera

window.location.href = "#";

Et comme il est écrit dans l'URL, il restera si vous actualisez.

En fait, vous n'avez pas besoin de JavaScript pour cela si vous voulez le faire sur un événement onclick, vous devriez simplement mettre un lien autour de votre élément et lui donner # comme href.

0
xavierm02

Commencez par ajouter une balise d'ancrage vierge à l'endroit où vous souhaitez aller.

<a href="#topAnchor"></a>

Maintenant, ajoutez une fonction dans la section d'en-tête

 function GoToTop() {
            var urllocation = location.href;
            if (urllocation.indexOf("#topAnchor") > -1) {
                window.location.hash = "topAnchor";
            } else {
                return false;
            }
        }

enfin ajouter un événement onload à la balise body

<body onload="GoToTop()">
0
Satii

Une version générique qui fonctionne pour toutes les valeurs X et Y et est identique à window.scrollTo api, avec juste l'ajout de scrollDuration.

* Une version générique correspondant à l’API du navigateur window.scrollTo **

function smoothScrollTo(x, y, scrollDuration) {
    x = Math.abs(x || 0);
    y = Math.abs(y || 0);
    scrollDuration = scrollDuration || 1500;

    var currentScrollY = window.scrollY,
        currentScrollX = window.scrollX,
        dirY = y > currentScrollY ? 1 : -1,
        dirX = x > currentScrollX ? 1 : -1,
        tick = 16.6667, // 1000 / 60
        scrollStep = Math.PI / ( scrollDuration / tick ),
        cosParameterY = currentScrollY / 2,
        cosParameterX = currentScrollX / 2,
        scrollCount = 0,
        scrollMargin;

    function step() {        
        scrollCount = scrollCount + 1;  

        if ( window.scrollX !== x ) {
            scrollMargin = cosParameterX + dirX * cosParameterX * Math.cos( scrollCount * scrollStep );
            window.scrollTo( 0, ( currentScrollX - scrollMargin ) );
        } 

        if ( window.scrollY !== y ) {
            scrollMargin = cosParameterY + dirY * cosParameterY * Math.cos( scrollCount * scrollStep );
            window.scrollTo( 0, ( currentScrollY - scrollMargin ) );
        } 

        if (window.scrollX !== x || window.scrollY !== y) {
            requestAnimationFrame(step);
        }
    }

    step();
}
0
jamesmfriedman