วิธีการเขียน
【 1 】จุดยึด
การใช้ลิงก์สมอเป็นการกลับไปด้านบนอย่างง่าย การใช้งานนี้ส่วนใหญ่วางลิงค์สมอพร้อมชื่อที่ระบุไว้ที่ด้านบนของหน้าจากนั้นวางลิงค์เพื่อกลับไปที่จุดยึดด้านล่างหน้า ผู้ใช้คลิกลิงก์เพื่อกลับไปยังตำแหน่งด้านบนที่จุดยึดอยู่
[หมายเหตุ] ข้อมูลรายละเอียดเกี่ยวกับจุดยึดจะถูกย้ายที่นี่
<body style = "ความสูง: 2000px;"> <div id = "topanchor"> </div> <a href = "#topanchor" style = "ตำแหน่ง: แก้ไข; ขวา: 0; ด้านล่าง: 0"> กลับไปด้านบน </a> </body>
【 2 】 Scrolltop
คุณสมบัติ Scrolltop ระบุจำนวนพิกเซลที่ซ่อนอยู่เหนือพื้นที่เนื้อหา เมื่อองค์ประกอบไม่ได้เลื่อนค่าของ scrolltop คือ 0 ถ้าองค์ประกอบนั้นเป็นแนวตั้งในแนวตั้งค่าของ scrolltop จะมากกว่า 0 และระบุความกว้างของพิกเซลของเนื้อหาที่มองไม่เห็นเหนือองค์ประกอบ
เนื่องจาก Scrolltop สามารถเขียนได้ Scrolltop จึงสามารถใช้เพื่อให้ได้ฟังก์ชั่นกลับไปด้านบน
[หมายเหตุ] รายละเอียดของปัญหาความเข้ากันได้ของ scrolltop บนหน้าจะถูกย้ายที่นี่
<body style = "ความสูง: 2000px;"> <button id = "test" style = "ตำแหน่ง: แก้ไข; ขวา: 0; ด้านล่าง: 0"> กลับไปด้านบน </button> <script> test.onclick = function () {document.body.scrolltop = document.documentelement.scrolltop = 0;【 3 】 Scrollto ()
Scrollto (x, y) วิธีการเลื่อนเอกสารที่แสดงในหน้าต่างปัจจุบันเพื่อให้คะแนนที่ระบุโดยพิกัด X และ Y ในเอกสารจะอยู่ที่มุมซ้ายบนของพื้นที่แสดงผล
ตั้งค่า Scrollto (0,0) เพื่อให้ได้ผลของการกลับไปด้านบน
<body style = "ความสูง: 2000px;"> <button id = "test" style = "ตำแหน่ง: แก้ไข; ขวา: 0; ด้านล่าง: 0"> ย้อนกลับไปด้านบน </button> <test> test.onclick = function () {scrollto (0,0);} </script> </body>【 4 】 Scrollby ()
Scrollby (x, y) วิธีการเลื่อนเอกสารที่แสดงในหน้าต่างปัจจุบัน x และ y ระบุจำนวนสัมพัทธ์ของการเลื่อน
เพียงใช้ความยาวสกรอลล์ของหน้าปัจจุบันเป็นพารามิเตอร์และเลื่อนในสิ่งที่ตรงกันข้ามคุณสามารถบรรลุผลของการกลับไปด้านบน
<body style = "ความสูง: 2000px;"> <button id = "test" style = "ตำแหน่ง: แก้ไข; ขวา: 0; ด้านล่าง: 0"> ย้อนกลับไปด้านบน </button> <test> test.onclick = function () {var top = document.body.scrolltoptop || document.documentelement.scrolltopscrollby (0, -top);} </script> </body>【 5 】 Scrollintoview ()
Element.Scrollintoview วิธีการเลื่อนองค์ประกอบปัจจุบันและเข้าสู่พื้นที่ที่มองเห็นได้ของเบราว์เซอร์
วิธีนี้สามารถยอมรับค่าบูลีนเป็นพารามิเตอร์ ถ้าเป็นจริงก็หมายความว่าด้านบนขององค์ประกอบจะอยู่ในแนวเดียวกันกับส่วนบนของส่วนที่มองเห็นได้ของพื้นที่ปัจจุบัน (โดยมีเงื่อนไขว่าพื้นที่ปัจจุบันสามารถเลื่อนได้); หากเป็นเท็จหมายความว่าด้านล่างขององค์ประกอบจะจัดเรียงกับหางของส่วนที่มองเห็นได้ของพื้นที่ปัจจุบัน (โดยมีเงื่อนไขว่าพื้นที่ปัจจุบันสามารถเลื่อนได้) หากไม่มีพารามิเตอร์นี้ค่าเริ่มต้นจะเป็นจริง
หลักการของการใช้วิธีนี้คล้ายกับหลักการของการใช้จุดยึด ตั้งค่าองค์ประกอบเป้าหมายที่ด้านบนของหน้า เมื่อหน้าเลื่อนหน้าองค์ประกอบเป้าหมายจะถูกเลื่อนนอกพื้นที่หน้า คลิกที่ปุ่มย้อนกลับไปที่ด้านบนเพื่อกลับไปยังตำแหน่งเดิมและบรรลุเอฟเฟกต์ที่คาดหวัง
<body style = "ความสูง: 2000px;"> <div id = "target"> </div> <ปุ่ม id = "ทดสอบ" style = "ตำแหน่ง: แก้ไข; ขวา: 0; ด้านล่าง: 0"> กลับไปด้านบน </button>
ที่ได้รับการปรับปรุง
ต่อไปนี้ช่วยเพิ่มฟังก์ชั่นกลับไปด้านบน
【 1 】แสดงการปรับปรุง
ใช้ CSS เพื่อวาดและเปลี่ยน "กลับไปด้านบน" เป็นกราฟิกภาพ (หากเข้ากันได้กับ IE8-Browser ให้ใช้รูปภาพแทน)
ใช้เอฟเฟกต์เทียมเทียม CSS และเอฟเฟกต์หลอกหลอก เมื่อเมาส์เคลื่อนไปยังองค์ประกอบข้อความกลับไปด้านบนจะปรากฏขึ้นและไม่ปรากฏขึ้นเมื่อย้ายออก
<style> .box {ตำแหน่ง: แก้ไข; ขวา: 10px; ด้านล่าง: 10px; ความสูง: 30px; ความกว้าง: 50px; text-allign: center; padding-top: 20px; พื้นหลังสี: LightBlue; Border-Radius: 20%; Overflow: Hidden;}. Box: Hover: ก่อน {Top: 50%}. Box: Hover .box-in {การมองเห็น: ซ่อน;}. กล่อง: ก่อน {ตำแหน่ง: Absolute; top: -50%; 40px; สี: เปรู; Font-weight: bold;} .box-in {การมองเห็น: มองเห็นได้; แสดง: inline-block; ความสูง: 20px; ความกว้าง: 20px; เส้นขอบ: 3px สีดำทึบ; สีชายแดน: สีขาวโปร่งใสสีขาว id = "box"> <div> </div> </div> </body>【 2 】การปรับปรุงภาพเคลื่อนไหว
เพื่อเพิ่มแอนิเมชั่นไปด้านบนแถบเลื่อนจะหมุนกลับไปด้านบนด้วยความเร็วที่แน่นอน
ภาพเคลื่อนไหวมีสองประเภท: หนึ่งคือภาพเคลื่อนไหว CSS ซึ่งต้องการการเปลี่ยนแปลงสไตล์และการเปลี่ยนแปลง อีกอันคือแอนิเมชั่น JavaScript ซึ่งใช้ตัวจับเวลาเพื่อใช้งาน
ในการใช้งาน 5 ข้างต้นวิธีการ scrolltop, scrollto () และ scrollby () สามารถเพิ่มภาพเคลื่อนไหวและเนื่องจากไม่มีการเปลี่ยนแปลงสไตล์จึงสามารถเพิ่มแอนิเมชั่น JavaScript ได้เท่านั้น
ตัวจับเวลาสามารถใช้งาน SetInterval, settimeout และ RequestAnimationFrame ต่อไปนี้คือการใช้การร้องขอตัวจับเวลาที่มีประสิทธิภาพดีที่สุดเพื่อนำไปใช้งาน
[หมายเหตุ] IE9-Browser ไม่รองรับวิธีนี้คุณสามารถใช้ Settimeout เพื่อความเข้ากันได้
1. เพิ่มเอฟเฟกต์แอนิเมชั่น Scrolltop
ใช้ตัวจับเวลาลดค่า scrolltop ลง 50 ครั้งในแต่ละครั้งจนกว่าจะลดลงเป็น 0 และภาพเคลื่อนไหวเสร็จสิ้น
<script> var timer = null; box.onclick = function () {cancelanimationFrame (ตัวจับเวลา); timer = requestanimationFrame (ฟังก์ชั่น fn () {var otop = document.body.scrolltop || documentElement.scrolltop; ถ้า (otop> 0) 50; timer = requestanimationFrame (fn);} else {cancelanimationFrame (ตัวจับเวลา);}});} </script>2. เพิ่มเอฟเฟกต์แอนิเมชั่น Scrollto ()
รับพารามิเตอร์ y ใน scrollto (x, y) ผ่านค่า scrolltop ลดลง 50 ในแต่ละครั้งจนกว่าจะลดลงเป็น 0 และภาพเคลื่อนไหวเสร็จสิ้น
<script> var timer = null; box.onclick = function () {cancelanimationFrame (ตัวจับเวลา); timer = requestanimationFrame (ฟังก์ชั่น fn () {var otop = document.body.scrolltop || documentElement.scrolltop; ถ้า (otop> 0) RequestanimationFrame (fn);} else {cancelanimationFrame (ตัวจับเวลา);}});} </script>3. เพิ่มเอฟเฟกต์ภาพเคลื่อนไหว Scrollby ()
ตั้งค่าพารามิเตอร์ y ใน scrollby (x, y) เป็น -50 จนกระทั่ง scrolltop เป็น 0 จากนั้นจะหยุดการย้อนกลับ
<script> var timer = null; box.onclick = function () {cancelanimationFrame (ตัวจับเวลา); timer = requestanimationFrame (ฟังก์ชั่น fn () {var otop = document.body.scrolltop || documentElement.scrolltop; ถ้า (otop> 0) RequestanimationFrame (fn);} else {cancelanimationFrame (ตัวจับเวลา);}});} </script>ทำให้สำเร็จ
ตั้งแต่ Scrolltop, Scrollby () และ Scrollto () ทุกวิธีใช้ไม่ว่าค่า scrolltop จะลดลงเป็น 0 เป็นข้อมูลอ้างอิงสำหรับการหยุดเคลื่อนไหวและหลักการและการใช้งานของภาพเคลื่อนไหวทั้งสามนั้นคล้ายกันโดยทั่วไปและการแสดงก็คล้ายกัน ในที่สุดเอฟเฟกต์การเพิ่มประสิทธิภาพของแอนิเมชั่นจะเกิดขึ้นได้ด้วยแอตทริบิวต์ Scrolltop ที่ใช้กันมากที่สุด
แน่นอนถ้าคุณคิดว่าความเร็ว 50 ไม่เหมาะสมคุณสามารถปรับได้ตามสถานการณ์จริง
<style> .box {ตำแหน่ง: แก้ไข; ขวา: 10px; ด้านล่าง: 10px; ความสูง: 30px; ความกว้าง: 50px; text-allign: center; padding-top: 20px; พื้นหลังสี: LightBlue; Border-Radius: 20%; Overflow: Hidden;}. Box: Hover: ก่อน {Top: 50%}. Box: Hover .box-in {การมองเห็น: ซ่อน;}. กล่อง: ก่อน {ตำแหน่ง: Absolute; top: -50%; 40px; สี: เปรู; Font-weight: bold;} .box-in {การมองเห็น: มองเห็นได้; แสดง: inline-block; ความสูง: 20px; ความกว้าง: 20px; เส้นขอบ: 3px สีดำทึบ; สีชายแดน: สีขาวโปร่งใสสีขาว id = "box"> <div> </div> </div> </body> </body> <script> var timer = null; box.onclick = function () {cancelanimationFrame (ตัวจับเวลา); timer = requestimationFrame (ฟังก์ชั่น fn () {var otop = document.body.scrolltop || = document.documentelement.scrolltop = otop - 50; timer = requestanimationframe (fn);} else {cancelimationFrame (ตัวจับเวลา);}});} </script>ข้างต้นเป็นคำอธิบายเต็มรูปแบบของวิธีการเขียนห้าวิธี (จากการใช้งานไปจนถึงการปรับปรุง) ตามการใช้งาน JS กับคุณซึ่งฉันแนะนำให้คุณรู้จัก ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉัน บรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin Network!