كيفية التصميم

كيفية اضافة زر الصعود الى اعلى في HTML و JS و CSS

Amr
اخر تحديث :
كيفية اضافة زر الصعود الى اعلى في html و js

درس إضافة زر الصعود لأعلى

في هذا الدرس، سنتعلم كيفية إنشاء زر للصعود إلى أعلى الصفحة باستخدام HTML و JavaScript حيث يعتبر هذا الزر مفيد عندما تحتوي الصفحة على الكثير من المحتوى ويحتاج المستخدم للعودة سريعًا إلى أعلى الصفحة.

الخطوات الأساسية

  • إنشاء الزر باستخدام HTML.
  • إضافة CSS لتنسيق مظهر الزر.
  • استخدام JavaScript لإظهار الزر عند التمرير للأسفل وتفعيل وظيفة الصعود لأعلى.

الخطوة 1: إنشاء الزر باستخدام HTML

أول شيء سنقوم به هو إنشاء الزر في HTML حيث تأكد من إضافة الزر داخل عنصر <body>:

    <button id="scrollTopBtn" onclick="scrollToTop()"><span class="material-icons">arrow_upward</span></button>

بعد ذلك لكي تظهر الرمز الذي يوجد في الزر بشكل صحيح عليك بإضافة روابط مكتبات Google Icons في عنصر <head>:

    <!--استيراد أيقونات من Google Icons-->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"></link>هذا الكود يقوم بإنشاء زر يحتوي على أيقونة "⬆️" (السهم للأعلى) مع تفعيل وظيفة JavaScript عند النقر عليه.

الخطوة 2: إضافة CSS لتنسيق الزر

لنقم بتنسيق الزر حتى يبدو بشكل جذاب ويظهر في المكان المناسب. أضف الكود التالي داخل العنصر <style> في <head>:

    
#scrollTopBtn {
    display: none; /* إخفاء الزر في البداية */
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    background-color: #ff5722; /* لون مميز */
    color: white;
    border: none;
    padding: 15px;
    border-radius: 50px; /* زر دائري */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); /* ظل لتحسين المظهر */
    cursor: pointer;
    font-size: 24px;
    transition: background-color 0.3s, transform 0.3s; /* تأثير انتقال */
}

#scrollTopBtn:hover {
    background-color: #e64a19;
    transform: translateY(-5px); /* إضافة حركة عند التمرير */
}

الخطوة 3: إضافة JavaScript لتفعيل الزر

الآن نحتاج إلى كتابة كود JavaScript الذي سيجعل الزر يظهر عند التمرير ويعود بالمستخدم إلى أعلى الصفحة عند النقر عليه كل ما عليك هو إضافة الكود التالي في نهاية الصفحة قبل إغلاق وسم </body>:

    
<script>
// عندما يقوم المستخدم بالتمرير لأسفل 20px من أعلى الصفحة، أظهر الزر
window.onscroll = function() {
    toggleScrollTopButton();
};

function toggleScrollTopButton() {
    var scrollTopBtn = document.getElementById("scrollTopBtn");
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        scrollTopBtn.style.display = "block";
    } else {
        scrollTopBtn.style.display = "none";
    }
}

// عند النقر على الزر، يتم التمرير إلى أعلى الصفحة
function scrollToTop() {
    document.body.scrollTop = 0; // للمتصفحات القديمة
    document.documentElement.scrollTop = 0; // للمتصفحات الحديثة
}
</script>

كيف يعمل الكود؟

الجزء التفصيل
HTML قمنا بإضافة زر باستخدام <button> مع أيقونة "arrow_upward" من Google Icons.
CSS تم تنسيق الزر ليكون في أسفل يمين الصفحة ويظهر فقط عند التمرير.
JavaScript يتم التحقق من التمرير لأسفل وإذا تجاوز المستخدم 20px، يظهر الزر. عند النقر على الزر يتم التمرير إلى أعلى الصفحة.

أمثلة إضافية

يمكنك تخصيص الزر بشكل أكبر عن طريق تغيير الألوان أو الأيقونات جرب المثال التالي لتغيير الأيقونة والنص:

    
<button id="scrollTopBtn" onclick="scrollToTop()">
    <span class="material-icons">keyboard_arrow_up</span> ارجع لأعلى
</button>

ملاحظات

  • تأكد من أن الزر لا يظهر بشكل مزعج على الشاشة، لذلك يجب أن يظهر فقط عند الحاجة (عند التمرير).
  • استخدم أيقونات مناسبة توضح الغرض من الزر، كالأيقونة "⬆️"
  • استخدم أيقونات مناسبة توضح الغرض من الزر، مثل الأيقونة "⬆️" أو "arrow_upward" لتوضيح وظيفة الصعود لأعلى.

أمثلة إضافية لتخصيص الزر

يمكنك تخصيص الزر بشكل أكبر من خلال تغيير الألوان أو الأيقونات فيما يلي بعض الأمثلة الإضافية:

مثال 1: تغيير الأيقونة والنص

    
<button id="scrollTopBtn" onclick="scrollToTop()">
    <span class="material-icons">keyboard_arrow_up</span> ارجع لأعلى
</button>

في هذا المثال، استبدلنا الأيقونة "arrow_upward" بالأيقونة "keyboard_arrow_up" مع إضافة نص بجانبها.

مثال 2: تغيير مكان الزر من أسفل يمين الشاشة إلى أسفل يسار

    
#scrollTopBtn {
    bottom: 20px;
    left: 20px; /* تغيير الموقع إلى اليسار */
}

في هذا المثال، قمنا بتغيير موقع الزر ليظهر في أسفل يسار الشاشة بدلًا من أسفل يمينها.

مثال 3: استخدام تأثيرات إضافية

لإضفاء المزيد من الجمال على الزر، يمكنك إضافة تأثيرات أخرى مثل تكبير الزر عند التمرير عليه:

    
#scrollTopBtn:hover {
    background-color: #ff7043; /* لون أفتح عند التمرير */
    transform: scale(1.1); /* تكبير الزر قليلاً */
}

هذا التأثير يجعل الزر يتغير حجمه قليلاً ويصبح أكثر لفتًا للنظر عند التمرير فوقه.

ملاحظات

  • تأكد من أن الزر لا يظهر إلا عند التمرير لأسفل الصفحة؛ حتى لا يكون مزعجًا للمستخدم.
  • اختر ألوانًا مريحة ومتناسقة مع تصميم موقعك لجعل الزر يبدو كجزء من التصميم وليس عنصرًا غريبًا.
  • يمكنك تخصيص الزر بعدة طرق مثل تغيير الأيقونات أو إضافة نصوص بجانب الأيقونة.

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

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

مقالات قد تهمك

تعليقات