css - Comment sauter vers le haut de la page du navigateur

388

Vous pouvez définir la scrollTop, comme ceci:
```
$('html,body').scrollTop(0);
```
Ou si vous voulez un peu d'animation au lieu d'un composant logiciel enfichable pour le haut:
```
$('html, body').animate({ scrollTop: 0 }, 'fast');
```
- bon... j'ai utilisé scrollTo plugin pour jQuery avant de faire - aurait pu sauver un peu de code avec votre code... merci pour la leçon 😉
- Pas de travail pour moi dans Firefox 30 et Chrome 36.
- désactiver votre CSS et ensuite voir si cela fonctionne. Vous pourriez avoir un problème avec la façon dont vous avez style de votre html et body balises. sinon utiliser $(window) à la place.
InformationsquelleAutor Nick Craver
129

Sans animation, vous pouvez utiliser du JS:
```
scroll(0,0)
```
Avec de l'animation, de vérifier Nick répondre.
- Est-ce pris en charge dans tous les navigateurs?
- scroll est dans le CSSOM standard tout en scrollTo a été défini dans DOM Niveau 0 et ne fait partie d'aucun standard. Cependant, CSSOM comprend scrollTo pour assurer la compatibilité ascendante.
- Je pense que scroll est largement pris en charge. Voir stackoverflow.com/q/1925671/41906
- Merci. Je suppose que window && window.scroll(0,0); est acceptable de mon point de vue modèle.
InformationsquelleAutor Ionuț Staicu
33

Si vous êtes à l'aide de jQuery UI boîte de dialogue, vous pourriez juste le style de la modale d'apparaître avec la position fixe dans la fenêtre de sorte qu'il n'a pas de pop-up de vue, la négation de la nécessité de les faire défiler. Sinon,
```
var scrollTop = function() {
    window.scrollTo(0, 0);
};
```
devrait faire l'affaire.

InformationsquelleAutor Silkster
13

Vous pourriez le faire sans javascript et simplement d'utiliser les balises d'ancrage? Ensuite, il serait accessible à ceux js gratuit.

même si, comme vous utilisez les auxiliaires modaux, je suppose que vous ne se soucient pas d'être js gratuit. 😉
- À l'aide d'ancrage des étiquettes d'interruption de hachage basée sur la navigation.
InformationsquelleAutor S.Kiers

JS:

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

CSS:

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

HTML:

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

InformationsquelleAutor Waruna Manjula

2

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

Plaine JS: window.scrollTop=0;

Malheureusement, scroll() et scrollTo() de générer des erreurs dans le Bord.

InformationsquelleAutor Josh Powlison
1

vous êtes à l'aide de jQuery UI boîte de dialogue, vous pourriez juste le style de la modale d'apparaître avec la position fixe dans la fenêtre de sorte qu'il n'a pas de pop-up de vue, la négation de la nécessité de les faire défiler. D'autres

InformationsquelleAutor gary

Vous devez vous connecter pour publier un commentaire.