إنتقل إلى المحتوى الرئيسي

العودة إلى الأعلى

ترجمة لـالمواصفات بالإنجليزية. إن اختلفت الترجمة عن الأصل، فالإنجليزية هي المرجع.

في الصفحة الطويلة، رابط للعودة إلى أعلاها: في الزاوية عند نهاية السطر، بعد أن تُمرَّر الصفحة شاشتين.

CSS: css/components/back-to-top.css. JS: js/back-to-top.js (initBackToTop()). الأصناف: .al-back-to-top.

في صفحته، بالإنجليزية والعربية

البنية​

HTML
<a class="al-back-to-top" href="#top">
  <svg class="al-icon" aria-hidden="true"><use href="dist/icons.svg#al-icon-arrow-up"></use></svg>
  العودة إلى الأعلى
</a>
<script type="module">
  import { initBackToTop } from "./js/back-to-top.js";
  initBackToTop();
</script>

ضعه مرة واحدة، آخر الصفحة بعد التذييل، ليكون آخر ما يصل إليه Tab. في React: ‏<BackToTop /> (href، وكلماته بوصفها children؛ و«العودة إلى الأعلى» بلغة الصفحة افتراضيًا).

الأشكال والأحجام​

شكل واحد. ثابت في الزاوية عند نهاية السطر (أسفل اليمين بالإنجليزية، وأسفل اليسار بالعربية)، على بعد --al-space-4 من الحواف، وارتفاعه 44px على الأقل، بحجم --al-text-sm. للصفحة التي يزيد طولها على ثلاث شاشات تقريبًا: مستند، أو مواصفات، أو صفحة عرض. الصفحة القصيرة لا تحتاجه، ولا يظهر فيها: فهو ينتظر حتى تُمرَّر الصفحة شاشتين.

الحالات​

مخفي في أعلى الصفحة؛ ويظهر تدريجيًا بعد أن تُمرَّر الصفحة شاشتين، ويختفي من جديد قرب الأعلى. عند التمرير فوقه يغمق إطاره؛ وللتركيز حلقة التركيز. وبلا JavaScript يظهر دائمًا، ويعمل مع ذلك: ‏#top هو أعلى الصفحة.

لوحة المفاتيح​

يصل إليه Tab أخيرًا؛ وEnter ينتقل إلى الأعلى، وينقل التركيز إليه أيضًا، فيكون Tab التالي أول رابط في الصفحة (رابط التخطي)، لا ما يأتي بعده.

ARIA​

رابط، اسمه كلماته؛ والسهم aria-hidden. وحين يُخفى يكون visibility: hidden، فيخرج من ترتيب Tab ومن شجرة الوصول.

من اليمين إلى اليسار​

في الزاوية عند نهاية السطر: أسفل اليسار. السهم يشير إلى الأعلى، فلا ينعكس أبدًا.

الحركة​

تُمرَّر الصفحة إلى الأعلى بسلاسة، إلا إن طلب الشخص تقليل الحركة: فتقفز. وظهور الرابط واختفاؤه بالمدة القياسية، ويُزالان مع كل حركة عند تقليلها.

افعل ولا تفعل​

افعل
  • استخدمه في الصفحات الطويلة فقط؛ إنه طريق العودة من الأسفل، لا وسيلة تنقّل.
  • أبقِ الكلمات: «العودة إلى الأعلى» تقول ما يفعله. والسهم وحده يحتاج تلميحًا ليُفهم.
لا تفعل
  • لا تضع اثنين في صفحة.
  • لا تغطِّ به عناصر الصفحة نفسها: الإشعار المنبثق، أو شريط الإجراءات الجماعية، أو زر المحادثة في الزاوية نفسها أولى؛ انقل هذا أو استغنِ عنه.

الرموز​

الرموز التي يستخدمها (15)

--al-border-focus، --al-border-hairline، --al-color-focus، --al-color-line-strong، --al-color-surface، --al-color-text، --al-color-text-muted، --al-duration-base، --al-ease-exit، --al-ease-standard، --al-radius-full، --al-space-2، --al-space-4، --al-text-sm، --al-z-sticky