Récemment, j'ai imité le style de page et l'interaction des principaux sites Web, et j'ai constaté que beaucoup d'entre eux avaient la nécessité de revenir au sommet, alors j'ai écrit sur JS et l'ai enregistré.
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 hauteur var ClientHeight = document.DocumentElement.ClientHeight; // Trigger Window.OnScroll = function () {// Affichez le bouton supérieur var ostop = document.documentElement.scrollTop || document.body.scrolltop; if (ostop> = clientHeight) {btn.style.display = "block"; } else {btn.style.display = "Aucun"; }; // Dans le processus de retour en haut, l'utilisateur fait défiler la barre de défilement et arrête la minuterie if (! Istop) {ClearInterval (timer); }; istop = 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 (-ostop / 7); document.DocumentElement. OSTOP + ISPEED; };};L'exemple simple ci-dessus de l'effet d'animation de JS pour revenir en haut de la page est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.