السلام عليكم ورحمة الله وبركاته
مرحبا بكم في مدونه مستر ابوعلي
أحبابي في الله، خلق تجربة جيدة للمستخدم على موقعك الخاص من الأمور المهمة جداً لإبقاء الناس على مواصلك تصفح الموقع. أفضل طريقة لخلق تجربة جيدة للمستخدم هو أن تجعل موقعك سهل التصفح و سهولة قراءة المتحوى و التنقل من صفحة الى اخرى، لا توجد أية أسرار :D ، إذا كان موقعك من الصعب تصفحه أو مليء بالإعلانات يمينا و شمالا، فتأكد عزيزي أن أي شخص يقوم بالدخول لموقعك سيخرج منه مباشرة. عندما نتكلم على سهولة التصفح فنتلكم عن إضافة أشياء و عناصر تسهل تصفح الموقع، في هذه التدوينة سنتعرف معا كيف نقوم بإضافة زر الصعود لأعلى الصفحة لموقعك بشكل جميل.
للمواقع التي لديها الكثير من المعلومات على الصفحة، أي شخص يقرأ مقال أو يشاهد معلومات معينة في تلك الصفحة حتما سوف ينزل إلى أسفل الصفحة بهدف إكمال قراءة تلك المعلومات. و العديد من المواقع تتوفر على "التمرير اللانهائي" مثل Google+ و هذا يمكن أن يكون مزعج للغاية إذا كنت ترغب في العودة إلى أعلى الصفحة بهدف تصفح قسم معين أو الضغط على رابط موجود في أعلى تلك الصفحة. في هذا الدرس ان شاء الله سنتعرف على طريقة بسيطة جداً لإضافة زر الصعود لأعلى الصفحة و الذي سيمكن المستخدمين لموقعك بالتوجه إلى أعلى الصفحة مباشرة دون عناء...
1 - الخطوة الأولى هي التوجه فوق </body> ثم إضافة الكود التالي :
2 - الخطوة الثانية هي إضافة الستايل - CSS :
<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; }); });