หน้าเว็บหลายหน้าจะวางปุ่ม "กลับไปด้านบน" ด้านล่างโดยเฉพาะหน้าเว็บที่ไม่มีการนำทางที่ด้านล่างของหน้าซึ่งสามารถช่วยให้ผู้เข้าชมค้นหาการนำทางอีกครั้งหรือทบทวนโฆษณา (มันสวยงามมาก) เมื่อ JavaScript เริ่มมีการใช้กันอย่างแพร่หลายมากขึ้นเรื่อย ๆ ในช่วงไม่กี่ปีที่ผ่านมาเอฟเฟกต์การเลื่อนจึงมีอยู่ทุกหนทุกแห่งดังนั้นฉันจึงทำตามแนวโน้มและทำให้การกลับมาทำงานด้านบนเพื่อสร้างเอฟเฟกต์การเลื่อน ต่อมาเพื่อให้พอดีกับลักษณะทางกายภาพที่ดีขึ้นผลการเลื่อนของการชะลอตัวลงถูกเปลี่ยน
มาพูดถึงหลักการก่อน เราจะได้ระยะห่างจากแถบเลื่อนไปด้านบนของหน้าแล้วเลื่อนขึ้นไปตามระยะทางที่กำหนด จากนั้นรับระยะห่างจากแถบเลื่อนไปด้านบนของหน้าและเลื่อนขึ้นไปตามระยะทางที่กำหนด (เล็กกว่าครั้งสุดท้ายเล็กน้อย); และอื่น ๆ ...
<script type = "text/javascript">/*** กลับไปที่ด้านบนของหน้า* @param เร่งความเร็วการเร่งความเร็ว* @param ช่วงเวลาเวลา (MS) **/ฟังก์ชั่น gotop (การเร่งความเร็ว, เวลา) {เร่งความเร็ว = การเร่งความเร็ว || 0.1; เวลา = เวลา || 16; var x1 = 0; var y1 = 0; var x2 = 0; var y2 = 0; var x3 = 0; var y3 = 0; if (document.documentElement) {x1 = document.documentelement.scrollleft || 0; y1 = document.documentelement.scrolltop || 0; } if (document.body) {x2 = document.body.scrollleft || 0; y2 = document.body.scrolltop || 0; } var x3 = window.scrollx || 0; var y3 = window.scrolly || 0; // ระยะทางแนวนอนจากแถบเลื่อนไปที่ด้านบนของหน้า var x = math.max (x1, math.max (x2, x3)); // ระยะทางแนวตั้งจากแถบเลื่อนไปด้านบนของหน้า var y = math.max (y1, math.max (y2, y3)); // ระยะการเลื่อน = ระยะทาง/ความเร็วปัจจุบันเนื่องจากระยะทางเล็กลงและความเร็วสูงกว่า 1 ระยะการเลื่อนจะมีขนาดเล็กลงและมีขนาดเล็กลงความเร็ว var = 1 + เร่งความเร็ว; window.scrollto (math.floor (x / speed), math.floor (y / speed)); // หากระยะทางไม่เป็นศูนย์ให้โทรหาฟังก์ชั่นการวนซ้ำต่อไปถ้า (x> 0 || y> 0) {var invokefunction = "gotop (" + การเร่งความเร็ว + "," + เวลา + ")"; window.settimeout (indekokefunction เวลา); }} </script>document.documentelement.scrolltop, document.body.scrolltop, window.scrolly เหมือนกันจริง ๆ แต่พวกเขาทำงานในเบราว์เซอร์บางตัวเท่านั้น เบราว์เซอร์ใดที่ทำงานได้คุณสามารถดีบั๊กด้วยตัวเอง
ใช้อย่างไร?
การคัดลอกรหัสมีดังนี้:
<a href = "#" onclick = "gotop (); return false;"> top </a>