เมื่อเร็ว ๆ นี้ฉันต้องสร้างปุ่มเพื่อกลับไปที่ด้านบนเมื่อพัฒนาเว็บไซต์ แต่ฉันพัฒนามันเป็นส่วนใหญ่สำหรับแบ็กเอนด์และไม่ค่อยมีทักษะในส่วนหน้า หลังจากสอบถามข้อมูลออนไลน์ฉันได้สร้างปุ่มเพื่อกลับไปด้านบน ต่อไปนี้เป็นสองวิธีง่ายๆในการบันทึก เพื่อนที่ชอบเว็บไซต์นี้สามารถบุ๊คมาร์คและจะอัปเดตสื่อการเรียนรู้ของพวกเขาเป็นครั้งคราว
ประเภทแรก: การอ้างถึง jQuery ภายนอกสร้างหน้า HTML ใหม่คัดลอกและบันทึกรหัสต่อไปนี้เปิดผ่านเบราว์เซอร์และคุณสามารถดูเอฟเฟกต์ได้
<! doctype html> <html lang = en> <head> <meta charset = utf-8> <title> doc </title> <style> .Arrow {ชายแดน: 9px Solid Transparent; ขอบล่าง-สี: #3DA0DB; ความกว้าง: 0px; ความสูง: 0px; ด้านบน: 0PX} .STICK {WIDTH: 8PX; ความสูง: 14px; แนวชายแดน: 1px; พื้นหลังสี: #3DA0DB; ด้านบน: 15px; } #back_top div {ตำแหน่ง: สัมบูรณ์; มาร์จิ้น: อัตโนมัติ; ขวา: 0px; ซ้าย: 0px; } #back_top {พื้นหลังสี: #dddddd; ความสูง: 38px; ความกว้าง: 38px; แนวชายแดน: 3px; แสดง: บล็อก; เคอร์เซอร์: ตัวชี้; ตำแหน่ง: แก้ไข; ขวา: 50px; ด้านล่าง: 100px; แสดง: ไม่มี; } </style> </head> <body> <div id = บทความ> </div> <div id = back_top> <div class = Arrow> </div> <div class = stick> </div> <script src = http: //cdn.staticfile.org/jquery/1.11.11.1.1.1-rc2/jquery.min i = 0; i <100; i ++) {$ (#บทความ) .append (<p> xxxxxxxxxx <br> </p>)}}) </script> <script> $ (ฟังก์ชั่น () {$ (หน้าต่าง). scroll (function () {// document.scrolltop; จะมีการกระพริบ}}); }); </script> </body> </html> ประเภทที่สอง: ใช้ CSS และไอคอนพิเศษเพื่อตั้งค่ารหัสทั้งหมดนั้นเรียบง่ายและสวยงาม กลับไปที่ปุ่มด้านบน เช่นเดียวกับข้างต้นคัดลอกรหัสลงในไฟล์ HTML และเปิดเพื่อดูเอฟเฟกต์
<! doctype html> <html lang = en> <head> <meta charset = utf-8> <title> doc </title> <style> #back_top {display: block; ความกว้าง: 60px; ความสูง: 60px; ตำแหน่ง: แก้ไข; ด้านล่าง: 50px; ขวา: 40px; แนวชายแดน: 10px 10px 10px; การตกแต่งข้อความ: ไม่มี; แสดง: ไม่มี; พื้นหลังสี:#999999; } #back_top Span {display: block; ความกว้าง: 60px; สี: #DDDDD; ขนาดตัวอักษร: 40px; TEXT-ALIGN: CENTER; ระยะขอบด้านบน: 4px; } #back_top Span: Hover {color: #cccccc; } </style> </head> <body> <div id = บทความ> </div> <a id = back_top href = script:;> <span> ⌆ </span> </a> </div> <script> $ (function () {สำหรับ (var i = 0; }}) </script> <script> $ (function () {$ (window) .scroll (function () {// ตราบใดที่หน้าต่างเลื่อน, รหัสต่อไปนี้จะถูกเรียกใช้ var scrollt = document.documentelement.scrolltop + document.scrolltop; $ (back_top) .Fadein (400); ถึงด้านบนใน 200ms. $ (HTML, Body) .animate ({scrolltop: 0px}, 200);สองวิธีข้างต้นให้แนวคิดเท่านั้นและสามารถใช้โดยตรง คุณสามารถดีบักไอคอนที่คุณต้องการด้วยตัวเอง ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น