Récemment, je dois créer un bouton pour revenir en haut lors du développement d'un site Web, mais je le développe principalement pour le backend et je ne suis pas très qualifié en frontend. Après la requête d'information en ligne, j'ai créé un bouton pour revenir en haut. Voici deux façons simples de l'enregistrer. Des amis qui aiment ce site Web peuvent le mettre en signet et mettront à jour leur matériel d'apprentissage de temps en temps.
Le premier type: citant jQuery externeCréez une nouvelle page HTML, copiez et enregistrez le code suivant, ouvrez-le via le navigateur et vous pouvez voir l'effet.
<! doctype html> <html Lang = en> <A-head> <meta charset = utf-8> <tight> doc </Title> <style> .Arrow {border: 9px Solid Transparent; Border-Bottom-Color: # 3DA0DB; Largeur: 0px; hauteur: 0px; en haut: 0px} .stick {width: 8px; hauteur: 14px; Border-Radius: 1px; Color d'arrière-plan: # 3DA0DB; en haut: 15px; } #back_top div {position: absolue; marge: auto; Droite: 0px; gauche: 0px; } #back_top {background-Color: #dddddd; hauteur: 38px; Largeur: 38px; Border-Radius: 3px; Affichage: bloc; curseur: pointeur; Position: fixe; À droite: 50px; En bas: 100px; Affichage: aucun; } </ style> </ head> <body> <div id = article> </ div> <div id = back_top> <div class = arrow> </ div> <div class = stick> </ div> <script src = http: //cdn.staticfile.org/jquery/1.11.1-rc2/jquery.min.js> i = 0; i <100; i ++) {$ (# article) .Apnd (<p> xxxxxxxxxx <br> </p>)}}) </cript> <cript> $ (fonction () {$ (fenêtre). Document.Body.Scrolltop; Ajouté, sinon, il y aura un clignotement}); $ (# back_top) .click (function () {// En cliquant sur la balise, utilisez Animate pour faire défiler le haut en 200 ms. $ (html, body). }); </cript> </ body> </html> Le deuxième type: utilisez CSS et des icônes spéciales pour la définirL'ensemble du code est simple et beau. Retournez sur le bouton supérieur. La même chose que ci-dessus, copiez le code dans le fichier HTML et ouvrez-le pour voir l'effet.
<! doctype html> <html lang = en> <éadf> <meta charset = utf-8> <tight> doc </ title> <style> #back_top {display: block; Largeur: 60px; hauteur: 60px; Position: fixe; En bas: 50px; À droite: 40px; Border-Radius: 10px 10px 10px; Décoration du texte: aucune; Affichage: aucun; Color en arrière-plan: # 999999; } #back_top span {display: block; Largeur: 60px; Couleur: #ddddd; taille de police: 40px; Texte-aligne: Centre; marge: 4px; } #back_top span: hover {couleur: #cccccc; } </ style> </ head> <body> <div id = article> </div> <a id = back_top href = script :;> <span> ⌆ </span> </a> </div> <prise> $ (function () {for (var> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxtestesantés }}) </cript> <cript> $ (function () {$ (window) .scroll (function () {// Tant que la fenêtre défile, le code suivant sera déclenché var scrollt = document.DocumentElement.Scrolltop + document.body.scrolltop; // Obtenir le défilement de la hauteur 200px, puis 2000) {// $ (# back_top) .fadein (400); Faites défiler vers le haut dans 200 ms. $ (html, body) .animate ({scrolltop: 0px}, 200);});}); </cript> </ body> </html>Les deux méthodes ci-dessus ne fournissent que des idées et peuvent être utilisées directement. Vous pouvez déboguer les icônes que vous voulez par vous-même. J'espère que cela sera utile à l'apprentissage de tous, et j'espère que tout le monde soutiendra davantage Wulin.com.