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

De la croix-navigateur, JavaScript solution:

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

Est-il un moyen pour EMPÊCHER le navigateur
défilement à son passé, ou même de
re-faites défiler vers le haut APRÈS avoir fait ses
chose?

La suite de jquery solution qui fonctionne pour moi:

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

Mise à JOUR

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

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

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

ATTENTION

Nous avons été à l'aide dans nos projets les plus récents, mais je viens de vérifier le mozilla doc maintenant alors que la mise à jour de ma réponse et je crois qu'il a été mis à jour. Actuellement, la méthode est window.scroll(x-coord, y-coord) et ne fait pas mention ou de montrer des exemples d'utilisation de la object paramètre vous permet de régler les behavior à smooth. Je viens d'essayer le code et il fonctionne toujours en chrome et firefox, et le paramètre d'objet est toujours dans le spec.

Donc l'utiliser avec prudence, ou vous pouvez utiliser cette Polyfill. À côté de défilement vers le haut, ce polyfill gère également d'autres méthodes: window.scrollBy, element.scrollIntoView, etc.

---

VIEILLE RÉPONSE

C'est notre vanille javascript mise en œuvre. Il a un simple effet d'accélération, de sorte que l'utilisateur n'obtient pas choqué après avoir cliqué sur le À Haut bouton.

Son très petit et devient encore plus petit quand minimisé. Les Devs vous cherchez une alternative à la méthode jquery mais que vous voulez les mêmes résultats peuvent l'essayer.

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>

Cheers!

Vous pouvez utiliser avec jQuery

jQuery(window).load(function(){

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

});

$(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);
        }
    );
 });

Utiliser Cette

Mon pur (animés) de Javascript solution:

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

Explication:

window.scrollY est une variable maintenu par le navigateur de la quantité de pixels à partir du haut que la fenêtre a été défile à l'.

window.scrollTo(x,y) est une fonction qui permet de faire 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 20 pixels vers le haut.

La setTimeout appelle la fonction de nouveau dans les 10 millisecondes afin que nous puissions ensuite le déplacer à un autre de 20 pixels (animé), et le if instruction vérifie si nous avons encore besoin de faire défiler la liste.

De la croix-navigateur faire défiler vers le haut:

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

De la croix-navigateur, faites défiler jusqu'à un élément avec l'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);
            }
        } 

Si vous êtes dans quircks mode (merci @Niet de l'Obscurité Absol):

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

Si vous êtes en mode strict:

document.documentElement.scrollTop = 0;

Pas besoin de jQuery ici.

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

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

Mais HTML travaillé:

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

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;"/>

Si quelqu'un utilise angulaire et la conception de matériel sidenav. Cela va vous envoyer vers le 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;
    });

D'abord ajouter un blanc d'ancrage de la balise à l'endroit où vous voulez aller

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

Maintenant ajouter 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 de la balise body

<body onload="GoToTop()">

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