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

Comment faire défiler vers le haut de la page en utilisant un JavaScript? Il est souhaitable même si la barre de défilement saute instantanément vers le haut. Je ne recherche pas un défilement fluide.

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

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

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

Cela prendra n'importe quelle <a>balise href="#top"et la rendra lisse défiler vers le haut.

Essayez ceci pour faire défiler en haut

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

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

Vous n'avez pas besoin de jQuery pour ce 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>

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

défilement fluide, pur javascript:

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

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

Éditer:

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

Une autre façon de faire défiler avec la marge supérieure et gauche:

window.scrollTo({ top: 100, left: 100, behavior: 'smooth' });

<script>

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

en html

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

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 c'est parti:

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 cela dans une fonction et l'appeler via l' onclickattribut. Vérifiez ce jsfiddle

Remarque: il s'agit d'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

Si vous souhaitez effectuer un défilement fluide, veuillez essayer 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.

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

$('.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é les 3 navigateurs et cela fonctionne
, j'utilise le plan directeur css
c'est lorsqu'un client clique sur le bouton "Réserver maintenant" et n'a pas la période de location 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 3sec il s'estompe

Un grand nombre d' utilisateurs est recommandé de sélectionner les balises html et le corps pour la compatibilité multi-navigateur, comme suit:

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

Cela peut vous faire trébucher si vous comptez que votre rappel ne s'exécute qu'une seule fois. Il s'exécutera en fait deux fois car vous avez sélectionné deux éléments.

Si cela vous pose 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 que 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 dans le cas où 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();
}

Les vieux #toppeuvent faire l'affaire

document.location.href = "#top";

Fonctionne bien dans FF, IE et Chrome

Essaye ça

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

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

Solution non jQuery / JavaScript pur:

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

Cela fonctionnera:

window.scrollTo(0, 0);

Essayez ce code:

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

div => Dom Element où vous souhaitez déplacer le défilement.

time => millisecondes, définissez la vitesse de défilement.

Solution JavaScript pure:

function scrollToTop() {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
});

J'écris une solution animée sur Codepen

Vous pouvez également essayer une autre solution avec la scroll-behavior: smoothpropriété CSS .

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

Pourquoi n'utilisez-vous pas la fonction intégrée de JQuery scrollTop:

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

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

Court et simple!

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

window.location = '#'

en cliquant sur le bouton "Aller en haut"

Exemple de démonstration:

output.jsbin.com/fakumo#

PS: N'utilisez pas cette approche lorsque vous utilisez des bibliothèques modernes comme angularjs. Cela pourrait briser le hashbang URL.

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

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

Si vous ne voulez pas de défilement fluide, vous pouvez tricher et arrêter l'animation de défilement fluide 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 peut-être quand vous voulez utiliser un clic pour animer une chose avec Jquery, mais en faire une autre sans animation? c'est-à-dire ouvrir un panneau de connexion administrateur en haut de la page et sauter instantanément en haut pour le voir.

Motivation

Cette solution simple fonctionne de manière native et implémente un défilement fluide vers 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 aussi confortables dans certaines situations, en particulier lorsque vous pointez vers le haut, ce qui pourrait conduire à deux URL différentes pointant vers le même emplacement ( http://www.example.org et http://www.example.org/# ).

Solution

Mettez un identifiant à la balise que vous souhaitez faire défiler, par exemple votre première section , qui répond à cette question, mais l' identifiant peut être placé partout dans la page.

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

Ensuite, en tant que bouton, vous pouvez utiliser un lien, modifiez 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 document.getElementByIdest l' identifiant de la balise à laquelle vous souhaitez faire défiler après un clic.

Vous pouvez simplement utiliser une cible à partir 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.

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

Ajoutez le bouton "Aller en haut" 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>

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

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

Cela doit être fait comme ceci: /sharepoint/195870/

var w = document.getElementById("s4-workspace");
w.scrollTop = 0;