إن العودة إلى الزر العلوي في الصفحة الرئيسية Taobao هي كما يلي: سيتم عرض الزر بعد الانسحاب إلى مسافة معينة. انقر فوق الزر ببطء إلى الأعلى
دعنا أولاً نحلل الأحداث التي يجب إضافتها لتحقيق مثل هذا التأثير. انقل الماوس داخل وخارج الزر ، ويتغير أداء الأزرار ، لذلك تحتاج إلى إضافة أحداث Mouseover و Mouseout إلى الزر. للاستماع إلى التغييرات في شريط التمرير ، تحتاج إلى إضافة حدث التمرير إلى النافذة ، انقر فوق الزر للعودة إلى الأعلى ، وإضافة حدث نقرة إلى الزر. نحن نغلف معالج الحدث إلى ثلاث وظائف Movein ، Moveout ، Gotop ؛
هنا رمز HTML/CSS
نسخة الكود كما يلي:
<viv>
<viv> الرأس </div>
<div> المحتوى الرئيسي ، الارتفاع هو 2000 بكسل </div>
<vivbtn "> العودة إلى الأعلى </div>
</div>
نسخة الكود كما يلي:
.
.Content {ارتفاع: 2000 بكسل ؛
#BTN {
الموقف: ثابت ؛
أسفل: 50 بكسل ؛
اليمين: 0 ؛
العرض: 54px ؛
الارتفاع: 55 بكسل ؛
الخلفية: url (icons.png) no -repeat 0 -110px ؛
حجم الخط: 12 بكسل ؛
ارتفاع الخط: 55 بكسل ؛
محاذاة النص: المركز ؛
استولى النص: -9999EM ؛
المؤشر: مؤشر.
العرض: لا شيء ؛
فيما يلي رمز JS الكامل
نسخة الكود كما يلي:
window.addeventListener ("load" ، function () {
var btn = document.getElementById ("btn") ؛
btn.addeventListener ("mouseover" ، movin ، false) ؛
btn.addeventListener ("mouseout" ، moveout ، false) ؛
وظيفة movein () {
btn.style.color = "#ffffff" ؛
btn.style.textIndent = "0em" ؛
btn.style.backgroundImage = "none" ؛
btn.style.backgroundColor = "#ff4401" ؛
}
وظيفة moveout () {
btn.style.textIndent = "-9999EM" ؛
btn.style.backgroundImage = "url (icons.png)" ؛
}
وظيفة gotop (التسارع ، الوقت) {// تعديل المعلمات لضبط السرعة للعودة إلى الأعلى
التسارع = التسارع || 0.1 ؛
الوقت = الوقت || 10 ؛
var speed = 1 + تسريع ؛
وظيفة getScrollTop () {// احصل على المسافة العمودية من شريط التمرير
return document.documentElement.scrolltop ||.
}
SetScrolltop (القيمة) {// اضبط المسافة الرأسية من شريط التمرير.
document.documentElement.scrolltop = value ؛
document.body.scrolltop = value ؛
}
window.onscroll = function () {
var scrolltop = getScrollTop () ؛
إذا (scrolltop> 100) {// عند تحديد مدى بقاء شريط التمرير من أعلى النافذة ، فهو 100 بكسل
btn.style.display = "block" ؛
} آخر {
btn.style.display = "none" ؛
}
} ؛
btn.onclick = function () {
var timer = setInterval (function () {
SetScrolltop (Math.Floor (getScrolltop () /speed) ؛
إذا (getScrollTop () == 0)
ClearInterval (مؤقت) ؛
}، وقت)؛
} ؛
}
Gotop (0.2 ، 8) ؛
}، خطأ شنيع)؛
بالطبع ، هناك أساليب تنفيذ أخرى ، وما يلي هي الرموز الرئيسية لطرق أخرى
نسخة الكود كما يلي:
btn.onclick = function () {
ClearInterval (مؤقت) ؛
var timer = setInterval (function () {
var الآن = scrolltop ؛
السرعة = (0 - الآن) / 10 ؛
السرعة = math.floor (السرعة) ؛
إذا (الآن == 0) ؛
ClearInterval (مؤقت) ؛
document.documentElement.scrolltop = الآن + المتصفح في الوضع القياسي
document.body.scrolltop = الآن + سرعة ؛
} ، 15) ؛
}
يشير الرمز هنا بشكل أساسي إلى موارد أخرى على الإنترنت ويضيف القليل من فهمك. بالطبع هناك طرق تنفيذ أخرى ، مثل window.scrollto () التي يدعمها JavaScript في أقرب وقت. إذا قمت بتنفيذها مع JQ ، فسيصبح حجم الكود صغيرًا جدًا
أنا شخصياً أعتقد أنه سيكون من الأسهل بكثير تعلم JavaScript الأصلي أولاً ، مثل اكتشاف أنواع البيانات والإغلاق والميراث والنطاق و DOM و CSS ومعالجة الأحداث و AJAX وما إلى ذلك ، وتعلم الأطر الأخرى بعد الكفاءة.