يوجد لدى العديد من المدونين في حديقة المدونة أيقونة في الزاوية اليمنى السفلى من الصفحة في المدونة. بغض النظر عن كيفية امتداد الشاشة ، فإنها تظل دائمًا في الزاوية اليمنى السفلى. انقر فوق الصفحة إلى الأعلى. دعونا نفكر في كتابة عرض تجريبي لتحقيق هذا التأثير لاحقًا.
1. تم إصلاح الزاوية اليمنى السفلى من الرمز.
1. SS يوفر 4 طرق تخطيط. تمثل الثابت عناصر تحديد المواقع المطلقة. لذلك اخترنا استخدام ثابت لتحقيق تثبيت الرمز.
| مطلق | يولد عناصر مكونة تمامًا ، وتحديد المواقع بالنسبة للعنصر الوالد الأول بخلاف تحديد المواقع الثابتة. يتم تحديد موضع عنصر ما بواسطة سمات "اليسار" و "أعلى" و "يمين" و "أسفل". |
| مُثَبَّت | توليد عناصر مكونة تمامًا ، وتحديد المواقع نسبة إلى نافذة المتصفح. يتم تحديد موضع عنصر ما بواسطة سمات "اليسار" و "أعلى" و "يمين" و "أسفل". |
| نسبي | توليد عناصر مكونة نسبيا ، وتحديد المواقع بالنسبة لموضعها الطبيعي. لذلك ، "اليسار: 20" يضيف 20 بكسل إلى الموضع الأيسر للعنصر. |
| ثابت | القيمة الافتراضية. لا يوجد أي موقع ، ويظهر العنصر في الدفق العادي (تجاهل إعلان أعلى أو أسفل أو يسار أو يمين أو مؤشر z). |
| ورث | يحدد أن قيمة سمة الموضع يجب أن تكون ورثًا من العنصر الأصل. |
2. الرمز كما يلي. سيتم دائمًا وضع زر الزر في الزاوية اليمنى السفلى من الشاشة. سواء كان يتم سحب الشريط الدقيق العلوي والسفلي أو تمديد حجم نافذة المتصفح.
نسخة الكود كما يلي:
#mytopbtn {
أسفل: 5 بكسل ؛
اليمين: 5px ؛
الموقف: ثابت ؛
}
2. بعد النقر ، ارجع إلى الزاوية العلوية من الصفحة.
1. للعودة إلى الزاوية العليا من الشاشة ، تحتاج إلى فهم كيفية استخدام JavaScript لتشغيل حركة السحب لأعلى ولأسفل. يوفر JavaScript طرق Scrollby و Scroll.
نسخة الكود كما يلي:
window.scrollby (0 ، -30) // انقل 30 بكسل إلى أعلى الشاشة
window.scroll (0،0) // تعود الشاشة إلى الزاوية العلوية
2. ما ذكر أعلاه ذكر كيفية تحريك شريط السحب ، لذلك كيفية الانتقال إلى الجزء العلوي من الصفحة بسرعة معينة. ثم تحتاج إلى استخدام طرق SetInterval و Clearinterval. سيمكن هذا من نقل 30 بكسل إلى أعلى الشاشة في أقل من 10 مللي ثانية.
نسخة الكود كما يلي:
<body>
<div id = "mydiv">
</div>
<button id = "mytopbtn" onClick = "topfunc ()"> إلى الأعلى </button>
</body>
نسخة الكود كما يلي:
فار مييفار
وظيفة topfunc () {
myvar = setInterval (كل شيء ، 10) ؛
}
وظيفة كل شيء (كل منهما) {
if (document.documentElement.scrolltop <= 0) {
Clearinterval (Myvar) ؛
}آخر{
window.scrollby (0 ، -30) ؛
}
}
ثالثا. يوسع
يتم تنفيذ الزر العلوي. فكيف ننفذ الزر انقر فوق الشاشة السفلية؟ في الواقع ، المبدأ مشابه ، لذلك لن نكتب العرض التوضيحي هنا. توفير بعض السمات للرجوع إليها.
نسخة الكود كما يلي:
عرض المنطقة المرئية لصفحة الويب: document.body.clientwidth
ارتفاع المنطقة المرئية لصفحة الويب: document.body.clientheight
عرض المنطقة المرئية لصفحة الويب: document.body.OffsetWidth (بما في ذلك عرض خط الحافة)
ارتفاع المنطقة المرئية لصفحة الويب: document.body.offsetheight (بما في ذلك عرض خط الحافة)
عرض النص الكامل لصفحة الويب: document.body.scrollwidth
النص الكامل لصفحة الويب: document.body.scrollheight
يتم طرح صفحة الويب على مستوى عالٍ: document.body.scrolltop
يسار صفحة الويب التي يتم طرحها: document.body.scrollleft
في الجزء الرئيسي من صفحة الويب: window.screentop
يسار النص الرئيسي لصفحة الويب: window.screenleft
دقة شاشة عالية: window.screen.hight
عرض دقة الشاشة: window.screen.width
شاشة مساحة العمل المتاحة: window.screen.availheight
عرض مساحة العمل المتاح: window.screen.availwidth
ما سبق هو المحتوى الكامل لهذه المقالة. آمل أن أحذية الأطفال الذين يحبون لعب المدونات مثلها.