درسنا لهذا اليوم يتناول تقنية من تقنيات الـ jQuery، و التي أصبحت تنتشر في أغلب المواقع، الأمر يتعلق بإضافة زر “عودة إلى الأعلى” إلى موقعك. فائدة هذه الإضافة أنها تسهل على الزوار العودة إلى أعلى الصفحة التي يتصفحونها بضغطة زر واحدة، دون اللجوء إلى إستخدام الماوس أو أسهم التنقل، لأن ذلك يؤدي إلى ضياع بعض الوقت، ناهيك عن الملل الذي يمكن أن يتخلل عملية التنقل من أسفل الصفحة إلى أعلاها، خصوصا إذا كانت صفحة طويلة جدا.
باستخدام هذه التقنية في موقعك فأنت ستقدم لزوار موقعك خدمة ستجنبهم ضياع الكثير من الوقت و الجهد في تصفح موقعك.
- عند مشاهدة المثال، قم بالتمرير إلى أسفل الصفحة، ثم اضغط زر “عودة إلى الأعلى”، بالأسفل جهة اليمين.
لإضافة هذه الخاصية بموقعك، قم أولا بإضافة رابط مكتبة الجيكيوري بموقعك، و ذلك بين الوسمين <head> و <head/> :
1
|
أضف الآن، الكود التالي بين نفس الوسمين السابقين، هذا الكود هو المسؤول عن كيفية ظهور و اختفاء زر عودة إلى الأعلى :
1
| <script type="text/javascript"> $(function() { $(window).scroll(function() { if($(this).scrollTop() != 0) { $('#toTop').fadeIn(); } else { $('#toTop').fadeOut(); } }); $('#toTop').click(function() { $('body,html').animate({scrollTop:0},800); }); }); </script> |
بعد ذلك، قم بإضافة هذا السطر مباشرة بعد الوسم <body>. هذا السطر يحتوي على المعرف toTop الذي استخدمناه في الكود السابق، للتحكم في كيفية ظهور و اختفاء الزر، و كذلك العبارة التي تظهر عند تمرير الصفحة إلى الأسفل :
1
| <div id="toTop">عودة إلى الأعلى</div> |
في النهاية، أضف كود التنسيق التالي بملف الاستايل الخاص بموقعك، أو أضفه مباشرة بين وسمي الرأس <head> و<head/>، لكن في هذه الحالة يجب أن تضع الكود بين وسمي التنسيق، أي <style> و <style/> :
1
| #toTop{ width:100px; border:1px solid #ccc; background:#f7f7f7; text-align:center; padding:5px; position:fixed; /* this is the magic */ bottom:10px; /* together with this to put the div at the bottom*/ right:10px; cursor:pointer; display:none; color:#333; font-family:verdana; font-size:11px; } |
فقط هذا كل شيء، استمتع الآن بزر “عودة إلى الأعلى”، بدون أي إضافات، بالتوفيق للجميع.
هل أعجبك الموضوع ؟
ليست هناك تعليقات: