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

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

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

الكل.

ال.

طريق.

إلى.

ال.

أعلى.

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

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

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

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

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

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

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

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

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

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

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

هيا بنا نبدأ! سوف أمشي خلال كل خطوة من خطوات العملية ، ويمكنك أيضًا اتباع برنامج Codepen هذا من مهندس الواجهة الأمامية لـ Flywheel ، Josh Masen.

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

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

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

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

<a class="top-link hide" href="" id="js-top">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"><path d="M12 6H0l6-6z"/></svg>
  <span class="screen-reader-text">Back to top</span>
</a>

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

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

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

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

<span class="screen-reader-text">Back to top</span>

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

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

.top-link {
  transition: all .25s ease-in-out;
  position: fixed;
  bottom: 0;
  right: 0;
  display: inline-flex;
  
 cursor: pointer;
 align-items: center;
 justify-content: center;
 margin: 0 3em 3em 0;
 border-radius: 50%;
 padding: .25em;
 width: 80px;
 height: 80px;
 background-color: #F8F8F8;

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

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

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

  .show {
    visibility: visible;
    opacity: 1;
  }
  
  .hide {
    visibility: hidden;
    opacity: 0;
  }

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

svg {
 fill: #000;
 width: 24px;
 height: 12px;
}

&:hover {
 background-color: #E8E8E8;

 	svg {
	 fill: #000000;
	}
}

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

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

// Text meant only for screen readers.
.screen-reader-text {
	position: absolute;
	clip-path: inset(50%);
	margin: -1px;
	border: 0;
	padding: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	word-wrap: normal !important;
	clip: rect(1px, 1px, 1px, 1px);

	&:focus {
		display: block;
		top: 5px;
		left: 5px;
		z-index: 100000; // Above WP toolbar
		clip-path: none;
		background-color: #eee;
		padding: 15px 23px 14px;
		width: auto;
		height: auto;
		text-decoration: none;
		line-height: normal;
		color: #444;
		font-size: 1em;
		clip: auto !important;
	}
}

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

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

// Set a variable for our button element.
const scrollToTopButton = document.getElementById('js-top');

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

const scrollFunc = () => {
  // Get the current scroll value
  let y = window.scrollY;
  
  // If the scroll value is greater than the window height, let's add a class to the scroll-to-top button to show it!
  if (y > 0) {
    scrollToTopButton.className = "top-link show";
  } else {
    scrollToTopButton.className = "top-link hide";
  }
};

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

window.addEventListener("scroll", scrollFunc);

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

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

const scrollToTop = () => {
  // Let's set a variable for the number of pixels we are from the top of the document.
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  
  // If that number is greater than 0, we'll scroll back to 0, or the top of the document.
  // We'll also animate that scroll with requestAnimationFrame:
  // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    // ScrollTo takes an x and a y coordinate.
    // Increase the '10' value to get a smoother/slower scroll!
    window.scrollTo(0, c - c / 10);
  }
};

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

// When the button is clicked, run our ScrolltoTop function above!
scrollToTopButton.onclick = function(e) {
  e.preventDefault();
  scrollToTop();
}

التالي: اكتشف 19 إضافات WordPress التي يحبها مطورو WordPress

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

هذا هو! سيكون لديك الآن زر الرجوع إلى الأعلى الذي يعمل بشكل كامل وقابل للتخصيص على موقع WordPress الخاص بك. لمشاهدة البرنامج التعليمي بالكامل أثناء العمل ، تذكر أن تطلع على برنامج Codepen هذا من مهندس الواجهة الأمامية لشركة Flywheel ، Josh Masen!