Je travaille récemment sur des projets frontaux et de nombreux projets ont les exigences pour revenir au sommet. Ci-dessous, j'écrirai mon code JS pour en faire un enregistrement pour une recherche plus facile à l'avenir.
J'ai trouvé que l'effet d'animation du rapide aunt lent et la fonction de réduire la barre de défilement pour arrêter de faire défiler à tout moment. J'ai fait référence aux cours pertinents sur IMOOC et j'ai finalement implémenté le code JS comme suit:
// Trigger Window.onLoad = function () {var btn = document.getElementById ('btn'); var timer = null; var istop = true; // Obtenez la page de visualisation de la page var var clientight = document.DocumentElement.clientHeight; // Trigger Window.OnScroll = fure document.body.scrolltop; if (ostop> = clientHeight) {btn.style.display = "block";} else {btn.style.display = "None";}; // Dans le processus de retour au sommet, l'utilisateur défile le scrollbar et l'arrêt du tiper iStop = istop) {Clear Interval (TIMER); false;}; btn.onclick = function () {// set timer timer = setInterval (function () {// obtenir la hauteur de la barre de scroll à partir du top var ostop = document.documentElement.scrolltop || document.body.scrolltop; var ispeed = math.floor (-osop / 7); document.DocumentElement.scrolltop = document.body.scrolltop = ostop + ispeed; // ajouter en haut, effacez la minuterie if (ostop == 0) {ClearInterval (timer);}; istop = true;}, 30);};};Le contenu ci-dessus est le code d'animation basé sur l'implémentation basée sur JavaScript en haut de la page introduite par l'éditeur. Le code est simple et facile à comprendre. Il n'y a pas trop de commentaires qui vous sont attachés. Si vous trouvez des questions pendant le processus de référence, veuillez me laisser un message. L'éditeur vous répondra à temps!