Vor kurzem muss ich eine Schaltfläche erstellen, um bei der Entwicklung einer Website nach oben zurückzukehren. Nach Online -Informationsabfrage habe ich eine Schaltfläche erstellt, um nach oben zurückzukehren. Im Folgenden sind zwei einfache Möglichkeiten aufgezeichnet, um es aufzuzeichnen. Freunde, die diese Website mögen, können sie mit einem Lesezeichen versehen und ihre Lernmaterialien von Zeit zu Zeit aktualisieren.
Der erste Typ: Externe jQuery zitierenErstellen Sie eine neue HTML -Seite, kopieren und speichern Sie den folgenden Code, öffnen Sie ihn über den Browser und Sie können den Effekt sehen.
<! docType html> <html lang = en> <kopf> <meta charset = utf-8> <title> doc </title> <style> .Arrow {Border: 9px solide transparent; Grenzbodenfarbe: #3DA0DB; Breite: 0px; Höhe: 0px; Top: 0px} .stick {width: 8px; Höhe: 14px; Border-Radius: 1PX; Hintergrundfarbe: #3DA0DB; Top: 15px; } #back_top div {Position: absolut; Rand: Auto; Rechts: 0px; links: 0px; } #back_top {Hintergrund-Color: #dddddd; Höhe: 38px; Breite: 38px; Border-Radius: 3px; Anzeige: Block; Cursor: Zeiger; Position: fest; Rechts: 50px; unten: 100px; Anzeige: Keine; } </style> </head> <body> <div id = article> </div> <div id = back_top> <div class = arrow> </div> <div class = stick> </div> <script src = http: //cdn.static.org/jquery.11.1.1-rc 2/jquery.min.min.min.min.min.min.min.min.miny.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min.Min. i = 0; i <100; i ++) {$ (#article) .Append (<p> xxxxxxxxxx <br> </p>)}}) </script> <script> $ (function () {$ (Fenster) .Scroll (function Dokument.Scrolltop; Ansonsten wird es blinkend}}); }); </script> </body> </html> Der zweite Typ: Verwenden Sie CSS und spezielle Symbole, um es einzustellenDer gesamte Code ist einfach und schön. Kehren Sie zum oberen Taste zurück. Kopieren Sie den Code wie oben in die HTML -Datei und öffnen Sie ihn, um den Effekt anzuzeigen.
<! docType html> <html lang = en> <kopf> <meta charset = utf-8> <title> doc </title> <style> #back_top {display: block; Breite: 60px; Höhe: 60px; Position: fest; unten: 50px; Rechts: 40px; Border-Radius: 10px 10px 10px; Textdekoration: Keine; Anzeige: Keine; Hintergrundfarbe:#999999; } #back_top span {display: block; Breite: 60px; Farbe: #ddddd; Schriftgröße: 40px; Text-Align: Mitte; Rand: 4px; } #back_top span: hover {color: #ccccc; } </style> </head> <body> <div id = article> </div> <a id = back_top href = script:;> <span> ⌆ </span> </a> </div> <script> $ (function () {für (var i = 0; i <100; i ++) {$). }})</script><script>$(function(){ $(window).scroll(function(){ //As long as the window scrolls, the following code will be triggered var scrollt = document.documentElement.scrollTop + document.body.scrollTop; //Get the scrolling height if( scrollt >200 ){ //Judge the height after scrolling exceeds 200px, and then $ (#Back_top) .Fadein (400); Scrollen Sie nach oben in 200 msDie beiden oben genannten Methoden liefern nur Ideen und können direkt verwendet werden. Sie können die Ikonen, die Sie sich wünschen, selbst debuggen. Ich hoffe, es wird für das Lernen aller hilfreich sein, und ich hoffe, jeder wird Wulin.com mehr unterstützen.