ปุ่มย้อนกลับไปที่ด้านบนบนหน้าแรกของ Taobao มีดังนี้ปุ่มจะปรากฏขึ้นหลังจากดึงลงไปในระยะที่แน่นอน คลิกปุ่มช้าๆกลับไปด้านบน
ก่อนอื่นให้วิเคราะห์ว่าต้องเพิ่มเหตุการณ์ใดเพื่อให้ได้ผลดังกล่าว เลื่อนเมาส์เข้าและออกจากปุ่มและการเปลี่ยนแปลงประสิทธิภาพของปุ่มดังนั้นคุณต้องเพิ่มเหตุการณ์ MouseOver และ MouseOut ลงในปุ่ม ในการฟังการเปลี่ยนแปลงในแถบเลื่อนคุณต้องเพิ่มเหตุการณ์สกรอลล์ลงในหน้าต่างคลิกปุ่มเพื่อกลับไปที่ด้านบนและเพิ่มเหตุการณ์คลิกลงในปุ่ม เราห่อหุ้มตัวจัดการเหตุการณ์ออกเป็นสามฟังก์ชั่น movein, movout, gotop;
นี่คือรหัส HTML/CSS
การคัดลอกรหัสมีดังนี้:
<div>
<div> Head </div>
<div> เนื้อหาหลักความสูงคือ 2000px </div>
<divbtn "> กลับไปด้านบน </div>
</div>
การคัดลอกรหัสมีดังนี้:
.Container {ความกว้าง: 980px;
. content {ความสูง: 2000px;
#BTN {
ตำแหน่ง: แก้ไข;
ด้านล่าง: 50px;
ขวา: 0;
ความกว้าง: 54px;
ความสูง: 55px;
ความเป็นมา: url (icons.png) ไม่ทำซ้ำ 0 -110px;
ขนาดตัวอักษร: 12px;
ระดับความสูง: 55px;
TEXT-ALIGN: CENTER;
Text -Indent: -9999EM;
เคอร์เซอร์: ตัวชี้;
แสดง: ไม่มี;
ด้านล่างนี้เป็นรหัส JS ที่สมบูรณ์
การคัดลอกรหัสมีดังนี้:
window.addeventListener ("โหลด", function () {
var btn = document.getElementById ("btn");
Btn.addeventListener ("Mouseover", Movin, False);
btn.addeventListener ("Mouseout", Movout, False);
ฟังก์ชั่น movein () {
btn.style.color = "#ffffff";
btn.style.textindent = "0EM";
btn.style.backgroundroundimage = "ไม่มี";
btn.style.backgroundColor = "#ff4401";
-
ฟังก์ชั่น movout () {
btn.style.TextIndent = "-9999EM";
btn.style.backgroundroundimage = "url (icons.png)";
-
ฟังก์ชั่น gotop (การเร่งความเร็วเวลา) {// แก้ไขพารามิเตอร์เพื่อปรับความเร็วเพื่อกลับไปที่ด้านบน
การเร่งความเร็ว = การเร่งความเร็ว || 0.1;
เวลา = เวลา || 10;
ความเร็ว var = 1 + การเร่งความเร็ว;
ฟังก์ชั่น getScrolltop () {// รับระยะทางแนวตั้งของแถบเลื่อน
ส่งคืนเอกสาร. documentelement.scrolltop || document.scrolltop;
-
ฟังก์ชั่น setScrollTop (ค่า) {// ตั้งค่าระยะทางแนวตั้งของแถบเลื่อน
document.documentelement.scrolltop = ค่า;
document.body.scrolltop = ค่า;
-
window.onscroll = function () {
var scrolltop = getScrolltop ();
ถ้า (scrolltop> 100) {// เมื่อพิจารณาว่าแถบเลื่อนมาจากด้านบนของหน้าต่างไกลแค่ไหนมันคือ 100px
btn.style.display = "block";
} อื่น {
btn.style.display = "ไม่มี";
-
-
btn.onclick = function () {
var timer = setInterval (ฟังก์ชัน () {
SetScrolltop (Math.Floor (GetScrolltop () /ความเร็ว));
ถ้า (getScrolltop () == 0)
ClearInterval (ตัวจับเวลา);
}, เวลา);
-
-
Gotop (0.2, 8);
}, เท็จ);
แน่นอนว่ามีวิธีการใช้งานอื่น ๆ และต่อไปนี้เป็นรหัสคีย์สำหรับวิธีอื่น ๆ
การคัดลอกรหัสมีดังนี้:
btn.onclick = function () {
ClearInterval (ตัวจับเวลา);
var timer = setInterval (ฟังก์ชัน () {
var now = scrolltop;
ความเร็ว = (0 - ตอนนี้) / 10;
ความเร็ว = math.floor (ความเร็ว);
ถ้า (ตอนนี้ == 0);
ClearInterval (ตัวจับเวลา);
document.documentelement.scrolltop = Now + Speed;
document.body.scrolltop = Now + Speed;
}, 15);
-
รหัสที่นี่ส่วนใหญ่หมายถึงแหล่งข้อมูลอื่น ๆ บนอินเทอร์เน็ตและเพิ่มความเข้าใจของคุณเองเล็กน้อย แน่นอนว่ามีวิธีการใช้งานอื่น ๆ เช่น window.scrollto () ที่ JavaScript รองรับในเวลาแรก หากคุณใช้งานกับ JQ ปริมาณรหัสจะเล็กมาก
โดยส่วนตัวแล้วฉันคิดว่ามันจะง่ายกว่ามากในการเรียนรู้ JavaScript ดั้งเดิมก่อนเช่นการหาประเภทข้อมูลการปิดการสืบทอดขอบเขต DOM CSS การประมวลผลเหตุการณ์อาแจ็กซ์ ฯลฯ และเรียนรู้เฟรมเวิร์กอื่น ๆ หลังจากความเชี่ยวชาญ