ستضع العديد من صفحات الويب زر "العودة إلى الأعلى" أدناه ، وخاصة صفحات الويب التي لا تحتوي على التنقل في أسفل الصفحة ، والتي يمكن أن تساعد الزائرين في العثور على التنقل مرة أخرى أو إعادة النظر في الإعلان (إنه جميل جدًا). نظرًا لأن 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 (" + sterceleration + "،" + time + ") ؛ Window.SettImeout (invokefunction ، time) ؛ }} </script>document.documentElement.scrolltop ، document.body.scrolltop ، window.scrolly هي نفسها في الواقع ، لكنها تعمل فقط في بعض المتصفحات. بالنسبة للمستعرضات التي تعمل ، يمكنك تصحيحها بنفسك.
كيف تستخدمه؟
نسخة الكود كما يلي:
<a href = "#" onclick = "gotop () ؛ return false ؛"> Top </a>