مدونة جوارا: تطبيق زر "العودة للأعلى" باستخدام JavaScript: دليل عملي خطوة بخطوة

📚 مراجعة سريعة: هذا التطبيق العملي مبني على مفهوم برمجي أساسي. راجع الدرس النظري من هنا أولاً.

مقدمة: أهمية زر العودة للأعلى

زر "العودة للأعلى" (Back to Top) هو ميزة بسيطة لكنها قوية لتحسين تجربة المستخدم، خاصة في الصفحات التي تحتوي على كمية كبيرة من المحتوى. بدلاً من أن يضطر المستخدم للتمرير يدوياً إلى أعلى الصفحة، يوفر هذا الزر اختصاراً سريعاً وفعالاً. في هذا الدرس العملي، سنتعلم كيفية بناء المنطق الأساسي لإظهار وإخفاء هذا الزر باستخدام JavaScript، مع التركيز على الكود المقدم.

التحضير: هيكل HTML للزر

قبل البدء بكود JavaScript، نحتاج إلى زر في هيكل HTML الخاص بنا. عادةً ما يكون هذا الزر عنصراً ثابتاً (fixed position) في زاوية الشاشة. لنفترض أن لدينا زرًا بالمعرف backToTop:

<!-- في أي مكان داخل وسم <body> --><button id="backToTop" style="display: none; position: fixed; bottom: 20px; right: 20px; background-color: #0078D4; color: white; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; font-size: 16px;">⬆️ العودة للأعلى</button>

لاحظ أننا قمنا بتعيين display: none; افتراضياً لإخفاء الزر عند تحميل الصفحة.

شرح الكود البرمجي خطوة بخطوة

الآن، لننتقل إلى الكود JavaScript الذي سيتحكم في ظهور هذا الزر:

window.addEventListener('scroll', () => {  const topBtn = document.getElementById('backToTop');  if (window.scrollY > 300) {    console.log("إظهار الزر الآن");  } else {    console.log("إخفاء الزر");  }});

1. إضافة مستمع حدث التمرير (Scroll Event Listener):

window.addEventListener('scroll', () => {  // ... الكود هنا ...});

هذا السطر هو نقطة البداية. نحن نستخدم window.addEventListener() للاستماع إلى حدث 'scroll' الذي يتم إطلاقه على الكائن window (الذي يمثل نافذة المتصفح بأكملها). الوظيفة السهمية () => { ... } هي الدالة التي سيتم تنفيذها في كل مرة يتم فيها تمرير الصفحة.

2. الحصول على مرجع الزر:

const topBtn = document.getElementById('backToTop');

هنا، نقوم بالحصول على مرجع لعنصر الزر الخاص بنا باستخدام document.getElementById('backToTop'). على الرغم من أن الكود المقدم لا يستخدم topBtn بشكل مباشر لإظهار أو إخفاء الزر (بل يكتفي بالطباعة في الكونسول)، إلا أن هذه الخطوة ضرورية جداً لأي تطبيق عملي حيث ستحتاج إلى التفاعل مع هذا العنصر.

3. التحقق من موضع التمرير:

if (window.scrollY > 300) {  console.log("إظهار الزر الآن");} else {  console.log("إخفاء الزر");}

window.scrollY: هذه الخاصية تُرجع عدد البكسلات التي تم تمريرها عمودياً من أعلى المستند. كلما مررت لأسفل، زادت قيمة window.scrollY.
الشرط if (window.scrollY > 300): هنا نتحقق مما إذا كان المستخدم قد مرر لأسفل أكثر من 300 بكسل. يمكنك تغيير هذه القيمة لتناسب تصميم موقعك.
console.log("إظهار الزر الآن"): إذا كان الشرط صحيحاً (أي تم التمرير لأكثر من 300 بكسل)، يتم طباعة هذه الرسالة في وحدة تحكم المتصفح (Console). في تطبيق حقيقي، ستقوم هنا بتغيير خاصية display للزر من none إلى block (أو flex، inline-block حسب الحاجة) لجعله مرئياً.
else { console.log("إخفاء الزر") }: إذا لم يتحقق الشرط (أي أن المستخدم في أعلى الصفحة أو لم يمرر أكثر من 300 بكسل)، يتم طباعة رسالة "إخفاء الزر". هنا، ستقوم بإعادة تعيين display للزر إلى none لإخفائه.

تطبيق كامل (للتوضيح)

لجعل الزر يعمل بشكل فعلي، سنقوم بتعديل الكود ليغير خاصية display للزر:

window.addEventListener('scroll', () => {  const topBtn = document.getElementById('backToTop');  if (window.scrollY > 300) {    topBtn.style.display = 'block'; // إظهار الزر  } else {    topBtn.style.display = 'none';  // إخفاء الزر  }});

💡 نصيحة المطور: لجعل زر "العودة للأعلى" يعمل بالفعل عند النقر عليه، ستحتاج إلى إضافة مستمع حدث 'click' آخر للزر topBtn. داخل هذا المستمع، يمكنك استخدام window.scrollTo({ top: 0, behavior: 'smooth' }); لجعل الصفحة تتمرر بسلاسة إلى الأعلى.

تطبيق زر "العودة للأعلى" باستخدام JavaScript: دليل عملي خطوة بخطوة