Comment écrire
【1】 Point d'ancrage
L'utilisation de liens d'ancrage est un simple retour vers le haut. Cette implémentation place principalement un lien d'ancrage avec un nom spécifié en haut de la page, puis place un lien pour revenir à l'ancre sous la page. L'utilisateur clique sur le lien pour revenir à la position supérieure où se trouve l'ancrage.
[Remarque] Des informations détaillées sur les points d'ancrage seront déplacées ici
<Body Style = "Height: 2000px;"> <div id = "topanchor"> </div> <a href = "# topanchor" style = "position: fixe; droite: 0; en bas: 0"> dos en haut </a> </ body>
【2】 Scrolltop
La propriété ScrollTop indique le nombre de pixels cachés au-dessus de la zone de contenu. Lorsque l'élément n'est pas défilé, la valeur de ScrollTop est 0. Si l'élément est défilé verticalement, la valeur de ScrollTop est supérieure à 0 et indique la largeur du pixel du contenu invisible au-dessus de l'élément.
Étant donné que ScrollTop est écrivable, ScrollTop peut être utilisé pour réaliser la fonction vers le haut
[Remarque] Les détails des problèmes de compatibilité de Scrolltop sur la page sont déplacés ici
<Body Style = "Height: 2000px;"> <Button id = "test" style = "position: fixe; droite: 0; en bas: 0"> Retour vers le haut </futton> <prit> test.onclick = function () {document.body.scrolltop = document.DocumentElement.ScrollTop = 0;} </cript> </pody>【3】 ScrolltO ()
Scrolltto (x, y) Méthode défile le document affiché dans la fenêtre actuelle, de sorte que les points spécifiés par les coordonnées x et y dans le document sont situés dans le coin supérieur gauche de la zone d'affichage.
Définissez ScrolltO (0,0) pour réaliser l'effet du retour au sommet
<body style = "height: 2000px;"> <button id = "test" style = "position: fixe; droit: 0; en bas: 0"> dos en haut </futton> <prit> test.onclick = function () {scrolltO (0,0);} </cript> </ body>【4】 Scrollby ()
Scrollby (x, y) Méthode Scrolls Le document affiché dans la fenêtre actuelle, X et Y spécifient la quantité relative de défilement
Utilisez simplement la longueur de défilement de la page actuelle en tant que paramètre et faites défiler en sens inverse, vous pouvez obtenir l'effet du retour en haut.
<body style = "height: 2000px;"> <button id = "test" style = "position: fixe; droit: 0; en bas: 0"> dos à top </utton> <prict> test.onclick = function () {var top = document.body.scrolltoptop || document.DocumentElement.ScrollTopscrollby (0, -top);} </cript> </body>【5】 ScrolLinToView ()
Element.scrollintoView Method défile l'élément actuel et entre dans la zone visible du navigateur.
Cette méthode peut accepter une valeur booléenne en tant que paramètre. Si cela est vrai, cela signifie que le haut de l'élément est aligné avec le haut de la partie visible de la zone actuelle (à condition que la zone actuelle soit défilée); En cas de faux, cela signifie que le bas de l'élément est aligné avec la queue de la partie visible de la zone actuelle (à condition que la zone actuelle soit défilée). Si ce paramètre n'est pas fourni, la valeur par défaut est vraie
Le principe d'utilisation de cette méthode est similaire au principe d'utilisation des points d'ancrage. Définissez l'élément cible en haut de la page. Lorsque la page défile, l'élément cible est défilé à l'extérieur de la zone de la page. Cliquez sur le bouton Retour vers le haut pour revenir à la position d'origine et atteindre l'effet attendu.
<body style = "height: 2000px;"> <div id = "target"> </div> <button id = "test" style = "position: fixe; droit: 0; en bas: 0"> dos en haut </utton> <prise> test.onclick = function () {target.scrolLintoView ();} </cript> </body>;Amélioré
Ce qui suit améliore la fonction vers le haut
【1】 Améliorer l'amélioration
Utilisez CSS pour dessiner et transformer "en haut" en graphique visuel (s'il est compatible avec IE8-Browser, utilisez des images à la place)
Utilisez les effets CSS Pseudo-Element et Pseudo-Hover. Lorsque la souris se déplace vers l'élément, le texte en haut s'affiche et il ne s'affiche pas lorsqu'il est déplacé.
<style> .box {position: fixe; droite: 10px; en bas: 10px; hauteur: 30px; largeur: 50px; texte-align: centre; padding-top: 20px; Background-Color: LightBlue; Border-Radius: 20%; Overflow: Hidden;}. Box: Hover: Avant {top: 50%}. Box: Hover .box-in {Visibility: Hidden;}. Box: Avant {position: Absolute; Top: -50%; Left: 50%; Transform: Translate (-50%, 50%); contenu: 'Back to Top'; largement: largement: largement: largement; 40px; Couleur: Pérou; Font-Weight: Bold;} .box-in {Visibility: Visible; Affichage: en ligne de bloc; hauteur: 20px; largeur: 20px; Border: 3PX Black solide; Border-Color: White Transparent White; id = "box"> <div> </div> </div> </gody>【2】 Amélioration de l'animation
Pour ajouter l'animation au sommet, la barre de défilement roule en haut à une certaine vitesse
Il existe deux types d'animations: l'une est l'animation CSS, qui nécessite des changements de style et une transition; L'autre est l'animation JavaScript, qui utilise une minuterie pour l'implémenter.
Dans les 5 implémentations ci-dessus, les méthodes ScrollTop, ScrollTo () et ScrollBy () peuvent ajouter des animations, et comme il n'y a pas de changement de style, seules des animations JavaScript peuvent être ajoutées
La minuterie peut être utilisée, setInterval, setTimeout et DequestanimationFrame. Ce qui suit consiste à utiliser le plus performant de demande de chronomation pour l'implémenter.
[Remarque] IE9-Browser ne prend pas en charge cette méthode, vous pouvez utiliser Settimeout pour la compatibilité
1. Ajouter un effet d'animation de décre
À l'aide d'une minuterie, réduisez la valeur de défilement de 50 à chaque fois jusqu'à ce qu'elle soit réduite à 0, et l'animation est terminée
<Script> var timer = null; box.OnClick = function () {CanceLanimationFrame (timer); timer = requestanimationFrame (function fn () {var otop = document.body.scrolltop || document.documentElement.scrolltop; if (otop> 0) {document.body.scrolltop = document.DocumentElement. 50; tempor = requestanimationframe (fn);} else {annulanationframe (timer);}});} </cript>2. Ajouter l'effet d'animation ScrollTO ()
Obtenez le paramètre Y dans ScrolltO (x, y) à travers la valeur de défilement, réduisez-le de 50 à chaque fois jusqu'à ce qu'il soit réduit à 0, et l'animation est terminée
<Script> var timer = null; box.onclick = function () {annulanationframe (timer); timer = requestanimationframe (function fn () {var otop = document.body.scrolltop || document.documentElement.scrolltop; if (otop> 0) {scrollto (0, otop-50); timiner = requestanimationFrame (fn);} else {CanceLanimationFrame (Timer);}});} </ script>3. Ajouter un effet d'animation Scrollby ()
Réglez le paramètre y dans Scrollby (x, y) sur -50 jusqu'à ce que le scrolltop soit 0, puis le retour en arrière s'arrête
<Script> var timer = null; box.onclick = function () {CanceLanimationFrame (timer); timer = requestanimationFrame (fonction fn () {var otop = document.body.scrolltop || document.documentElement.scrolltop; if (otop> 0) {Scrollby (0, -50); timiner = requestanimationFrame (fn);} else {CanceLanimationFrame (Timer);}});} </ script>accomplir
Étant donné que les méthodes ScrollTop, ScrollBy () et ScrollTo () utilisent toutes si la valeur de défilement est réduite à 0 comme référence pour l'arrêt de l'animation, et que les principes et les implémentations des trois animations sont fondamentalement similaires, et les performances sont également similaires. Enfin, l'effet d'amélioration de l'animation est obtenu avec l'attribut ScrollTop le plus utilisé
Bien sûr, si vous pensez que la vitesse de 50 ne convient pas, vous pouvez l'ajuster en fonction de la situation réelle
<style> .box {position: fixe; droite: 10px; en bas: 10px; hauteur: 30px; largeur: 50px; texte-align: centre; padding-top: 20px; Background-Color: LightBlue; Border-Radius: 20%; Overflow: Hidden;}. Box: Hover: Avant {top: 50%}. Box: Hover .box-in {Visibility: Hidden;}. Box: Avant {position: Absolute; Top: -50%; Left: 50%; Transform: Translate (-50%, 50%); contenu: 'Back to Top'; largement: largement: largement: largement; 40px; Couleur: Pérou; Font-Weight: Bold;} .box-in {Visibility: Visible; Affichage: en ligne de bloc; hauteur: 20px; largeur: 20px; Border: 3PX Black solide; Border-Color: White Transparent White; id = "box"> <div> </ div> </div> </body> <cript> var timer = null; box.onclick = function () {annulanationframe (timer); timer = requestanimationframe (function fn () {var otop = document.body.scrolltop || document.DocumentElement.scrollTop; 0) {document.body.scrolltop = document.documentElement.scrollTop = otop - 50; timer = requestanimationframe (fn);} else {annulanationFrame (timer);}});} </ script>Ce qui précède est la description complète des cinq méthodes d'écriture (de l'implémentation à l'amélioration) basées sur la mise en œuvre de JS à vous, que je vous ai présenté. J'espère que cela vous sera utile. Si vous avez des questions, laissez-moi un message. L'éditeur vous répondra à temps. Merci beaucoup pour votre soutien pour le site Web de Wulin.com!