Comment sauter en haut de la page du navigateur

186

J'écris une fenêtre contextuelle modale et j'ai besoin du navigateur pour sauter en haut de l'écran lorsque le bouton modal ouvert est enfoncé. Existe-t-il un moyen de faire défiler le navigateur vers le haut en utilisant jQuery?

javascript jquery css modal-dialog Exitos
la source

Réponses:

405

Vous pouvez définir le scrollTop, comme ceci:

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

Ou si vous voulez une petite animation au lieu d'un snap vers le haut:

$('html, body').animate({ scrollTop: 0 }, 'fast');
Nick Craver
la source
1
bon ... j'ai déjà utilisé le plugin scrollTo pour jQuery pour accomplir cela - j'aurais pu enregistrer un peu de code avec votre code ... merci pour la leçon ;-)
Zathrus Writer
@MikhailBatcer - désactivez votre CSS et voyez si cela fonctionne. Vous pourriez avoir un problème avec la façon dont vous avez stylisé vos balises htmlet body. sinon utilisez à la $(window)place.
invot
comment ajouter de la durée pour l'animation-skrolling?
Maxim Strutinskiy
139

Sans animation, vous pouvez utiliser JS brut:

scroll(0,0)

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

Ionuț Staicu
la source
4
Est-ce pris en charge dans tous les navigateurs?
Pacerier
1
scrollest dans le standard CSSOM alors qu'il scrollToétait à l'origine défini dans DOM niveau 0 et ne fait partie d'aucun standard. Cependant, CSSOM inclut scrollTopour la compatibilité descendante.
Clint Pachl
3
Je pense que scrollc'est largement soutenu. Voir stackoverflow.com/q/1925671/41906
Clint Pachl
Merci. Je suppose que window && window.scroll(0,0);c'est acceptable dans mon modèle de vue.
nrodic
34

Si vous utilisez la boîte de dialogue jQuery UI, vous pouvez simplement styliser le modal pour qu'il apparaisse avec la position fixée dans la fenêtre afin qu'il ne s'affiche pas hors de la vue, ce qui évite le besoin de faire défiler. Autrement,

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

devrait faire l'affaire.

Silkster
la source
13

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

même si vous utilisez des modaux, je suppose que vous ne vous souciez pas d'être libre de js. ;)

S.Kiers
la source
1
L'utilisation de balises d'ancrage interromprait la navigation basée sur le hachage.
Tom Landau
2 

// 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>
Développer l'extrait

Waruna Manjula
la source
2

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()jette des erreurs dans Edge.

Josh Powlison
la source
1

vous utilisez la boîte de dialogue de l'interface utilisateur jQuery, vous pouvez simplement styliser le modal pour qu'il apparaisse avec la position fixée dans la fenêtre afin qu'il ne s'affiche pas hors de vue, ce qui évite le besoin de faire défiler. Autre

Gary
la source
0

Javascript purSolution

theId.onclick = () => window.scrollTo(top: 0)

Si vous voulez un défilement fluide 

theId.onclick = () => window.scrollTo({ top: 0, behavior: `smooth` })
Moghazi
la source