Comment sauter en haut de la page du navigateur

Question

J'écris une popup modale et j'ai besoin que le navigateur saute en haut de l'écran lorsque le bouton d'ouverture de la modale est pressé. Existe-t-il un moyen de faire défiler le navigateur vers le haut en utilisant jQuery ?

Answer 1

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        document.getElementById("myBtn").style.display = "block";
    } else {
        document.getElementById("myBtn").style.display = "none";
    }

}

// When the user clicks on the button, scroll to the top of the document
function topFunction() {

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

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
}

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<button onclick="topFunction()" id="myBtn" title="Go to top">Top</button>

<div style="background-color:black;color:white;padding:30px">Scroll Down</div>
<div style="background-color:lightgrey;padding:30px 30px 2500px">This example demonstrates how to create a "scroll to top" button that becomes visible when the user starts to scroll the page.</div>

Answer 2

Je sais que c'est vieux, mais pour ceux qui ont des problèmes dans Edge :

Plain JS : window.scrollTop=0;

Malheureusement, scroll() y scrollTo() lancer des erreurs dans Edge.

Answer 3

Comme quelques réponses l'ont laissé entendre, j'ai dû utiliser window.scrollTo(0,0); au lieu de scrollTo(0,0);

window.scrollTo(0,0); fonctionne avec du javascript pur dans tous les navigateurs testés (pas d'animation). ( MDN ) ( w3schools ).

Exemples tirés du MDN :

Sans options :

window.scrollTo(0, 0);

Utilisation des options :

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

---

Voici un exemple simple utilisant le javascript en ligne avec le html :

<button onclick="window.scrollTo(0, 0);">Click to scroll to top</button>

Avec un défilement fluide :

<button onclick="window.scrollTo({top: 0, left: 0, behavior: 'smooth'});">Smooth scroll</button>

Note :
Il semble que le défilement fluide ne fonctionne pas par défaut dans Chrome (par exemple dans la version 89) sans avoir préalablement activé
chrome://flags/#smooth-scrolling (défilement lent)

---

window.scroll(0,0); semble similaire à window.scrollTo(0,0); mais avec une compatibilité moindre pour les options. ( référence ).

Answer 4

Si vous utilisez la boîte de dialogue jQuery UI, vous pouvez simplement faire en sorte que la modale apparaisse avec une position fixe dans la fenêtre, afin qu'elle ne disparaisse pas, ce qui évite de devoir la faire défiler. Autre