web-dev-qa-db-fra.com

Comment aller en haut de la page du navigateur

J'écris une fenêtre contextuelle modale et j'ai besoin du navigateur pour atteindre le haut de l'écran lorsque vous appuyez sur le bouton Ouvrir modale. Y at-il un moyen de faire défiler le navigateur vers le haut en utilisant jQuery?

javascriptjquerycssmodal-dialog
173
Exitos

Vous pouvez définir la scrollTop, comme ceci:

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

Ou si vous voulez une petite animation au lieu d’un instantané en haut:

$('html, body').animate({ scrollTop: 0 }, 'fast');
381
Nick Craver

Sans animation, vous pouvez utiliser JS en clair:

scroll(0,0)

Avec l'animation, vérifiez réponse de Nick .

128
Ionuț Staicu

Si vous utilisez la boîte de dialogue jQuery UI, vous pouvez simplement styler le modal pour qu’il apparaisse avec la position fixée dans la fenêtre afin qu’il ne sorte pas hors de vue, annulant ainsi la nécessité de faire défiler. Autrement,

var scrollTop = function() {
    window.scrollTo(0, 0);
};

devrait faire l'affaire.

33
Silkster

Vous pouvez le faire sans javascript et simplement utiliser des balises d'ancrage? Ensuite, il serait accessible à ces js gratuitement.

bien que, comme vous utilisez des modaux, je suppose que vous ne vous souciez pas d’être libre. ;)

13
S.Kiers

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

Plain JS: window.scrollTop=0;

Malheureusement, scroll() et scrollTo() génèrent des erreurs dans Edge.

2
Josh Powlison
// 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>
1
Waruna Manjula

si vous utilisez la boîte de dialogue jQuery UI, vous pouvez simplement styler le modal pour qu’il apparaisse avec la position fixée dans la fenêtre afin qu’il ne sorte pas hors de vue, éliminant ainsi la nécessité de faire défiler. Autre

1
gary