Home-theater-designers
يُستخدم زر 'التمرير لأعلى' لإعادة العرض إلى أعلى الصفحة بسهولة. ميزة UX الصغيرة هذه شائعة جدًا في مواقع الويب الحديثة. إنه مفيد بشكل خاص لصفحات الويب التي تحتوي على الكثير من المحتوى ، مثل تطبيقات الصفحة الواحدة.
أشياء رائعة للقيام بها في المحطة
في هذه المقالة ، ستتعلم كيفية إنشاء زر تمرير لأعلى باستخدام JavaScript و jQuery.
كيفية إنشاء زر التمرير لأعلى باستخدام JavaScript
يمكنك إضافة زر التمرير لأعلى إلى موقع الويب الخاص بك باستخدام مقتطف الشفرة التالي:
كود HTML
Scroll-to-Top button using JavaScript
Scroll down the page
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Curabitur efficitur porttitor ipsum, sed eleifend velit sagittis ut.
Maecenas eu elit vitae ipsum gravida gravida ut id erat.
Nullam accumsan, nisi ac imperdiet elementum, nibh augue efficitur ipsum, ac ultrices erat massa id massa.
Aliquam cursus lacus a augue gravida, pretium vehicula velit interdum.
هنا ، يتم إنشاء الهيكل الأساسي لصفحة الويب باستخدام بيانات وهمية. ما عليك سوى التركيز على زر التمرير لأعلى.
عند النقر فوق هذا الزر ، يتم تمرير الصفحة إلى الأعلى. سيكون هذا وظيفيًا بعد إضافة كود jQuery.
كود jQuery
متعلق ب: تعرف على كيفية إنشاء عنصر في jQuery
// ===== Scroll to Top ====
var btn = $('#button');
// If the page is scrolled more than 300px,
// show the scroll-to-top button
// Otherwise hide the button
$(window).scroll(function() {
if ($(window).scrollTop() > 300) {
btn.addClass('show');
} else {
btn.removeClass('show');
}
});
btn.on('click', function(e) {
e.preventDefault();
$('html, body').animate({scrollTop:0}, '300');
});هنا ، مشاهده تتم إضافة فئة إلى عنصر الزر إذا قام المستخدم بالتمرير لأكثر من 300 بكسل على صفحة الويب. هذه مشاهده class تجعل عنصر الزر مرئيًا. بشكل افتراضي ، يتم إخفاء رؤية عنصر الزر. مزيد من التفاصيل حول الزر موجودة في كود CSS التالي.
كود CSS
متعلق ب: أمثلة بسيطة لرمز CSS يمكنك تعلمها في 10 دقائق
#button {
display: inline-block;
background-color: #FF9800;
width: 50px;
height: 50px;
text-align: center;
border-radius: 4px;
position: fixed;
bottom: 30px;
right: 30px;
transition: background-color .3s,
opacity .5s, visibility .5s;
opacity: 0;
visibility: hidden;
z-index: 1000;
}
#button::after {
content: 'f077';
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
font-size: 2em;
line-height: 50px;
color: #fff;
}
#button:hover {
cursor: pointer;
background-color: #333;
}
#button:active {
background-color: #555;
}
#button.show {
opacity: 1;
visibility: visible;
}
/* Styles for the content section */
.content {
width: 77%;
margin: 50px auto;
font-family: 'Merriweather', serif;
font-size: 17px;
color: #6c767a;
line-height: 1.9;
}
@media (min-width: 500px) {
.content {
width: 43%;
}
#button {
margin: 30px;
}
}
.content h1 {
margin-bottom: -10px;
color: #03a9f4;
line-height: 1.5;
}
.content h3 {
font-style: italic;
color: #96a2a7;
}يتم استخدام CSS أعلاه لتصميم زر التمرير لأعلى وصفحة الويب. يمكنك اللعب برمز CSS وتصميم الزر وفقًا لمتطلباتك.
الآن لديك زر تمرير لأعلى / من الخلف إلى الأعلى يعمل بكامل طاقته. إذا كنت تريد إلقاء نظرة على التعليمات البرمجية المصدر الكاملة المستخدمة في هذه المقالة ، فإليك ملف مستودع جيثب من نفس الشيء.
ملحوظة : الكود المستخدم في هذه المقالة هو مرخصة من معهد ماساتشوستس للتكنولوجيا .
تعرف على المزيد حول تجربة المستخدم
تركز تجربة المستخدم على ما إذا كان المنتج يلبي احتياجات مستخدميه. إذا كنت مصممًا أو مطورًا ، فمن الأفضل اتباع مبادئ تصميم UX وإنشاء منتجات رائعة. إذا كنت مهتمًا بهذا المجال ، فيجب عليك اتباع المسار الصحيح للبدء.
أعد التشغيل وحدد نظام التشغيل المناسب windows 10يشارك يشارك سقسقة بريد الالكتروني تريد أن تكون مصمم UX؟ إليك كيفية البدء
تتمثل مهمة مصمم UX في التأكد من تلبية احتياجات مستخدم البرنامج ، وأنهم سعداء بهذه العملية.
اقرأ التالي مواضيع ذات صلة- برمجة
- جافا سكريبت
- مسج
يوفراج طالب جامعي في علوم الكمبيوتر بجامعة دلهي بالهند. إنه متحمس لتطوير الويب Full Stack. عندما لا يكتب ، فإنه يستكشف عمق التقنيات المختلفة.
المزيد من Yuvraj Chandraاشترك في نشرتنا الإخبارية
انضم إلى النشرة الإخبارية لدينا للحصول على نصائح تقنية ومراجعات وكتب إلكترونية مجانية وصفقات حصرية!
انقر هنا للاشتراك