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

نشرت: 2023-02-12

كلنا كنا هناك. لقد عثرت على دليل رائع عبر الإنترنت ، وقمت بالتمرير إلى أسفل الطريق ، ثم فكرت ، "رائع ، أود أن أرى ما يقدمه هذا الموقع أيضًا!"

ولكن بعد ذلك عليك التمرير.

الجميع.

ال.

طريق.

ل.

ال.

قمة.

وبعد ذلك تعتقد…. "هممم ، فما باللك." وأغلق الصفحة.

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

ما هو الزر اللاصق من العودة إلى الأعلى؟

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

الأشياء التي يجب مراعاتها قبل إضافة زر الرجوع إلى الأعلى

مثل أي اتجاه تصميم شائع ، أشجعك على الرجوع خطوة إلى الوراء قبل تنفيذه على موقعك لتسأل نفسك: إذا كنت سأقوم ببناء هذا ، فما هي إرشادات زر الرجوع للخلف التي أحتاج إلى اتباعها؟

فيما يلي بعض الأسئلة التي يجب الإجابة عليها قبل إنشاء زر التمرير لأعلى:

أين سيتم وضعها؟
ما هو حجمها (أو صغرها)؟
ما هي أنماط التصميم التي يجب عليك اتباعها حتى تظل على العلامة التجارية؟ (فكر في الألوان والخطوط والأيقونات وما إلى ذلك)
هل هو معرض لخطر تغطية محتوى موقع مهم ، مثل المعلومات الموجودة في الشريط الجانبي؟
ماذا يحدث على الأجهزة المحمولة؟ هل ستكون مستجيبة؟
هل تحتاجه بالفعل؟ *

* ملاحظة: يمكنك تقديم حجة مفادها أن المستخدمين اليوم مشروطون بالتمرير لأسفل (والنسخ الاحتياطي!) على الصفحة ، مما يلغي "الحاجة" إلى زر الرجوع إلى أعلى. نصيحتي: اختبرها! أضف حدث Google Analytics عند النقر أو استخدم أداة خريطة التمثيل اللوني مثل Hotjar لترى كيف يتفاعل زوار موقعك مع الصفحة.

إن أفضل "ممارسة" يجب اتباعها هي تلك التي تستند إلى البيانات الواردة من موقعك والمستخدمين!

كيفية إضافة زر مثبت من العودة إلى الأعلى إلى موقع WordPress الخاص بك

في هذا البرنامج التعليمي ، سأوضح لك كيفية إضافة زر الرجوع إلى الأعلى الذي نستخدمه هنا في Layout! الاختلاف الوحيد هو أننا وضعنا رأسنا في رأس لاصق أعلى الشاشة ، بدلاً من الزاوية اليمنى السفلية. (لكن لا تقلق ، إنه نفس المفهوم!)

نصيحة احترافية: على الرغم من أن هذا البرنامج التعليمي ليس متقدمًا للغاية ، ما زلت أوصي بتجربته على موقع مرحلي أو بيئة محلية ، لذلك لا يوجد أي خطر على الإطلاق على موقعك المباشر. إذا كنت بحاجة إلى إعداد واحد سريعًا ، فراجع Local ، وهو تطبيق WordPress محلي مجاني سهل الاستخدام بشكل لا يصدق.

أو تحقق من هذا الفيديو التعليمي حول إضافة زر الرجوع إلى الأعلى اللاصق!

شاهد زر Pen ES6 Scroll-to-top بواسطة Josh Lawler (joshuamasen) على CodePen.

في هذا البرنامج التعليمي اللاصق عن زر العودة لأعلى ، سنستخدم ثلاث لغات:

HTML للترميز لإنشاء الزر
CSS لتصميم الزر وجعله يتناسب مع علامتك التجارية
JavaScript لجعله "يعمل" وتحديد سلوكيات الزر

في HTML ، ستجد الأسطر التالية:

 <a class="top-link hide" href="">
  <svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 12 6"> <path d = "M12 6H0l6-6z" /> </svg>
  <span class = "screen-reader-text"> رجوع إلى الأعلى </ span>
</a>

سيكون هذا هو الزر اللاصق من العودة إلى الأعلى! يمكنك أن ترى أننا أضفنا فئة CSS تسمى .top-link ، ونستخدم بعض JavaScript البسيط "لجعلها تعمل". نحن نستخدم أيضًا SVG مضمنًا للزر.

إلى جانب SVG ، يمكنك أيضًا استخدام ملف صورة أو رمز خط لإنشاء الزر. لكننا نفضل طريقة SVG للأسباب التالية:

لن يتم تقطيعها بأحجام مختلفة للشاشة ، مثل الصورة النقطية.
يتم دعم SVGs عالميًا عبر المتصفحات. (رائع ، تجربة المستخدم!)
من السهل التصميم باستخدام CSS ، لذا يمكنك تغيير كل شيء يتعلق به بسهولة حقًا.
لا يتطلب الأمر سوى سطر واحد من التعليمات البرمجية ، مما يجعله خفيف الوزن وأفضل لأداء الموقع.

آخر جزء مهم حقًا ستجده في HTML هو هذا السطر:

 <span class = "screen-reader-text"> رجوع إلى الأعلى </ span>

يعد هذا أمرًا بالغ الأهمية للمستخدمين الذين يعملون باستخدام برامج قراءة الشاشة وسيحسن إمكانية الوصول إلى موقع WordPress الخاص بك. (فكر في الأمر كعلامة بديل لصورة ، ولكن لزر التمرير لأعلى الخاص بك!)

الآن دعنا نتحدث أكثر عن فئة CSS ، .top-link . نحن نستخدم هذا لتصميم الزر بالفعل ، وهو المكان الذي ستحدد فيه صفات مثل حجمه ، ومقدار الحشو الذي يجب أن يكون حوله ، واللون ، وما إلى ذلك.

 .top-link {
  الانتقال: جميع .25s سهولة في الخروج ؛
  الموقف: ثابت ؛
  أسفل: 0؛
  اليمين: 0؛
  عرض: مضمنة المرن ؛
  
 المؤشر: المؤشر.
 محاذاة العناصر: مركز ؛
 تبرير المحتوى: مركز ؛
 الهامش: 0 3em 3em 0 ؛
 نصف قطر الحدود: 50٪ ؛
 الحشو: .25em ؛
 العرض: 80 بكسل ؛
 الارتفاع: 80 بكسل ؛
 لون الخلفية: # F8F8F8 ؛

ملاحظة: نحن نستخدم لغة Sass (لغة أنماط) ، لكتابة CSS بشكل أسرع قليلاً. تعرف على المزيد حول هذا المعالج المسبق هنا.

زوجان من القطع المهمة من هذا المقتطف: transition: all .25s ease-in-out ؛ يتحكم في مدى "سرعة" ظهور الزر الخاص بك أو اختفائه على الشاشة ، position: fixed ؛ هو ما يجعل الزر "يلتصق" بالموقع الذي تريده.

بعد ذلك ، سترى قواعد .show .hide . سنستخدم JavaScript للتبديل بين هذه الفئات لإخبار المتصفح بالوقت الذي يجب (أو يجب ألا يظهر فيه) الزر على الصفحة.

 .يعرض {
    الرؤية: مرئي
    العتامة: 1 ؛
  }
  
  .يخفي {
    الرؤية: مخفي
    العتامة: 0؛
  }

قبل أن نذهب إلى JavaScript ، هناك بضعة أسطر أخرى سنضيفها إلى CSS.

 SVG {
 ملء: # 000 ؛
 العرض: 24 بكسل ؛
 الارتفاع: 12 بكسل ؛
}
&:يحوم {
 لون الخلفية: # E8E8E8 ؛
 	SVG {
	 ملء: # 000000 ؛
	}
}

ستعمل هذه الفئات على تنسيق صورة SVG للسهم نفسه وإخبار المتصفح بكيفية عرض الزر عندما يحوم المستخدم فوقه.

أخيرًا ، سنضيف بعض CSS لإخفاء النص الذي يقول "الرجوع إلى الأعلى" لقارئات الشاشة.

 // نص مخصص لقارئات الشاشة فقط.
نص قارئ الشاشة {
	الموقف: مطلق.
	مسار القصاصة: أقحم (50٪) ؛
	الهامش: -1 بكسل ؛
	الحدود: 0؛
	حشوة: 0 ؛
	العرض: 1 بكسل ؛
	الارتفاع: 1 بكسل ؛
	إخفاء الفائض؛
	التفاف الكلمات: عادي! مهم ؛
	مقطع: مستطيل (1 بكسل ، 1 بكسل ، 1 بكسل ، 1 بكسل) ؛
	&:ركز {
		العرض محجوب؛
		أعلى: 5 بكسل ؛
		اليسار: 5 بكسل ؛
		مؤشر z: 100000 ؛ // فوق شريط أدوات WP
		مسار القصاصة: لا شيء ؛
		لون الخلفية: #eee ؛
		الحشو: 15 بكسل 23 بكسل 14 بكسل ؛
		العرض: تلقائي ؛
		الارتفاع: تلقائي ؛
		زخرفة النص: لا شيء ؛
		ارتفاع الخط: عادي ؛
		اللون: # 444 ؛
		حجم الخط: 1em ؛
		مقطع: تلقائي! مهم ؛
	}
}

الآن إلى JavaScript! سنقوم بذلك بدون تحميل jQuery ، مما سيساعد في الحفاظ على كودك خفيف الوزن وسريع التحميل.

سيساعد المتغير الأول المتصفح في العثور على الزر.

 // تعيين متغير لعنصر الزر لدينا.
const scrollToTopButton = document.getElementById ('js-top') ؛

بعد ذلك ، سننشئ وظيفة تعرض زر التمرير لأعلى إذا قام المستخدم بالتمرير إلى ما بعد ارتفاع النافذة الأولية.

 const scrollFunc = () => {
  // احصل على قيمة التمرير الحالية
  دع y = window.scrollY ؛
  
  // إذا كانت قيمة التمرير أكبر من ارتفاع النافذة ، فلنقم بإضافة فئة إلى زر التمرير لأعلى لإظهارها!
  إذا (ص> 0) {
    scrollToTopButton.className = "عرض الارتباط العلوي" ؛
  } آخر {
    scrollToTopButton.className = "إخفاء الرابط العلوي" ؛
  }
} ؛

سنضيف أيضًا مستمعًا للأحداث ، والذي سيشاهد أثناء قيام المستخدم بالتمرير (حتى نعرف مكانهم في الصفحة).

 window.addEventListener ("التمرير" ، scrollFunc) ؛

يكاد ينتهي! بعد ذلك ، نحتاج إلى تحديد الوظيفة التي تجعل الزر يعيد المستخدم إلى أعلى الصفحة. للقيام بذلك ، سننشئ متغيرًا لعدد البيكسلات الموجودة في أعلى الصفحة. إذا كان هذا الرقم أكبر من 0 ، فستعيده الوظيفة إلى 0 ، لتأخذنا إلى القمة!

سنضيف أيضًا القليل من الرسوم المتحركة هنا ، حتى لا تكون القفزة مفاجئة جدًا.

 const scrollToTop = () => {
  // لنقم بتعيين متغير لعدد البكسل الذي نحن فيه من أعلى المستند.
  const c = document.documentElement.scrollTop || document.body.scrollTop ؛
  
  // إذا كان هذا الرقم أكبر من 0 ، فسننتقل مرة أخرى إلى 0 ، أو أعلى المستند.
  // سنقوم أيضًا بتحريك هذا التمرير باستخدام requestAnimationFrame:
  // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
  إذا (ج> 0) {
    window.requestAnimationFrame (scrollToTop) ؛
    // ScrollTo يأخذ إحداثيات x و ay.
    // قم بزيادة قيمة "10" للحصول على تمرير أكثر سلاسة / أبطأ!
    window.scrollTo (0 ، ج - ج / 10) ؛
  }
} ؛

أخيرًا وليس آخرًا ، نحتاج فقط إلى إخبار الصفحة بتشغيل هذه الوظيفة عندما ينقر شخص ما على زر الرجوع إلى أعلى.

 // عند النقر فوق الزر ، قم بتشغيل وظيفة ScrolltoTop أعلاه!
scrollToTopButton.onclick = الوظيفة (هـ) {
  e.preventDefault () ؛
  انتقل إلى أعلى()؛
}

هذا كل شيء! سيكون لديك الآن زر الرجوع إلى الأعلى الذي يعمل بشكل كامل وقابل للتخصيص على موقع WordPress الخاص بك.