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?

— Exitos
source

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