SUBSWISS

كيفية الانتقال الى اعلى الصفحة بأستخدام ألـ jQuery

بسم الله الرحمن الرحيم

السلام عليكم و رحمة الله و بركاته

في هذا الموضوع  سوف نتعرف على كيفية عمل زرار ” الرجوع الى الاعلى ” بأستخدام الجي كويري .

يمكنكم معاينة النتيجة في اسفل الموقع (اذهب الى اسفل الموقع , على اليمين توجد صورة سهم موجه الى الاعلى)

اولا تحتاج الى تفعيل الجي كويري في الموقع , يمكنكم تحميل الجي كويري من خلال الموفع الرسمي http://www.jquery.com

بعد ذلك نقوم بإظافته الى ملف الصفحة (على سبيل المثال في قالب الووردبريس او صفحة HTML )

قبل اغلاق الـ Head tag نقوم بأظافة الجي كويري :

<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

يمكنك تحميل الجي كويري و حفظه مع ملف الصفحة , وتغير امتداد المكتبة

الان سوف نقوم بأستدعاء خاصة الكي كويري التي نحتاجها من المكتبة لتفعيل الخاصية ايضا قبل اغلاق الهيد :

<script type="text/javascript">
$(document).ready(function() {
 $('a[href=#top]').click(function(){
 $('html, body').animate({scrollTop:0}, 'slow');
 return false;
 });
});
</script>

لم يبقى فقط كتابة الـ HTML  لتعمل الخاصية بكل بساطة :

<a href="#top">الرجوع الى الأعلى</a>

هذا كل شيء . بسيطة و سهلة و تضيف حركة دناميكية جميلة الى الموقع .

يمكنك ايضا تحميل الملف الكامل حول الدرس

jQuery