جيك تكنولوجي | التكنولوجيا ببساطة جيك تكنولوجي | التكنولوجيا ببساطة
مقالات

آخر الأخبار

مقالات
مقالات
جاري التحميل ...
مقالات

كيف تضيف زر الصعود لأعلى إلى موقعك


السلام عليكم أحبابي في الله، خلق تجربة جيدة للمستخدم على موقعك الخاص من الأمور المهمة جداً لإبقاء الناس على مواصلك تصفح الموقع. أفضل طريقة لخلق تجربة جيدة للمستخدم هو أن تجعل موقعك سهل التصفح و سهولة قراءة المتحوى و التنقل من صفحة الى اخرى، لا توجد أية أسرار :D ، إذا كان موقعك من الصعب تصفحه أو مليء بالإعلانات يمينا و شمالا، فتأكد عزيزي أن أي شخص يقوم بالدخول لموقعك سيخرج منه مباشرة. عندما نتكلم على سهولة التصفح فنتلكم عن إضافة أشياء و عناصر تسهل تصفح الموقع، في هذه التدوينة سنتعرف معا كيف نقوم بإضافة زر الصعود لأعلى الصفحة لموقعك بشكل جميل.

 للمواقع التي لديها الكثير من المعلومات على الصفحة، أي شخص يقرأ مقال أو يشاهد معلومات معينة في تلك الصفحة حتما سوف ينزل إلى أسفل الصفحة بهدف إكمال قراءة تلك المعلومات. و العديد من المواقع تتوفر على "التمرير اللانهائي" مثل Google+ و هذا يمكن أن يكون مزعج للغاية إذا كنت ترغب في العودة إلى أعلى الصفحة بهدف تصفح قسم معين أو الضغط على رابط موجود في أعلى تلك الصفحة. في هذا الدرس ان شاء الله سنتعرف على طريقة بسيطة جداً لإضافة زر الصعود لأعلى الصفحة و الذي سيمكن المستخدمين لموقعك بالتوجه إلى أعلى الصفحة مباشرة دون عناء...

1 - الخطوة الأولى هي التوجه فوق </body> ثم إضافة الكود التالي :

<a href="#" class="scrollToTop">أعلى</a>



2 - الخطوة الثانية هي إضافة الستايل - CSS : 
.scrollToTop{ width:100px; height:130px; padding:10px; text-align:center; background: whiteSmoke; font-weight: bold; color: #444; text-decoration: none; position:fixed; top:75px; right:40px; display:none; background: url('arrow_up.png') no-repeat 0px 20px;}.scrollToTop:hover{ text-decoration:none;}


3 - و الخطوة الثالثة و الأخيرة هي إضافة كود جافا سكربت فوق الـ</body> 
$(document).ready(function(){ //Check to see if the window is top if not then display button $(window).scroll(function(){ if ($(this).scrollTop() > 100) { $('.scrollToTop').fadeIn(); } else { $('.scrollToTop').fadeOut(); } }); //Click event to scroll to top $('.scrollToTop').click(function(){ $('html, body').animate({scrollTop : 0},800); return false; }); });


يمكنك التعديل على الإضافة كما يحلو لك طبعاً سواء في شكلها عبر أكواد الـCSS أو عن طريقة عملها عبر أكواد الـJS، كما يمكنك كذالك التعديل على كود HTML، مثلا يمكنك إضافة أيقونة أو صورة مكان النص لكن أنصحك شخصيا باستعمال أيقونات fontawesome التي سبق و شرحناها. أتمنى من صميم القلب أنك استفدت من هذا الدرس، غير ذالك لاتسنى مشاركته مع أصدقائك. 

عن

حمزة محمد , مصمم ومطور مواقع ومدون ذو خبرة قررت انشاء هذة المدونة لنشر العلم والفائدة،اتمنى ان اقدم لكم الافضل ..
  1. الردود
    1. لا هناك مكان محدد لكل منها فى الخطوات اخي

      حذف
  2. لو سمحت لو ينفع تعمل فيديو صغير عن الطريقه

    ردحذف
    الردود
    1. الطريقة في مدونة مصراوي اخي ولاكن جيك افضل :e06:

      حذف

التعليقات



إذا أعجبك محتوى مدونتنا نتمنى البقاء على تواصل دائم ، فقط قم بإدخال بريدك الإلكتروني للإشتراك في بريد المدونة السريع ليصلك جديد المدونة أولاً بأول ، كما يمكنك إرسال رساله بالضغط على الزر المجاور ...

إتصل بنا

جميع الحقوق محفوظة

جيك تكنولوجي | التكنولوجيا ببساطة

2017