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

السلام عليكم أحبابي في الله، خلق تجربة جيدة للمستخدم على موقعك الخاص من الأمور المهمة جداً لإبقاء الناس على مواصلك تصفح الموقع. أفضل طريقة لخلق تجربة جيدة للمستخدم هو أن تجعل موقعك سهل التصفح و سهولة قراءة المتحوى و التنقل من صفحة الى اخرى، لا توجد أية أسرار :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 التي سبق و شرحناها. أتمنى من صميم القلب أنك استفدت من هذا الدرس، غير ذالك لاتسنى مشاركته مع أصدقائك.