Help creating a jump to top button

مطور
22

وجدت طريقة بسيطة، بدون جافا، فقط CSS و HTML.

  1. ضع هذا في <after header>

    <a name="top"></a>
<a class="to-top" href="#top" title="الذهاب إلى الأعلى">^</a>

  2. ثم إضافة CSS أنيق قليلاً:

    .to-top {
  z-index:3;
  position: fixed;
  left: 2%;
  bottom: 5%;
  padding: 10px;
  line-height: 12px;
  font-size:18px;
  color:black;
  border:solid 1px black;
  border-radius:10px;
  -webkit-animation: float 1s infinite  alternate;
  animation: float 1s infinite  alternate;
}

.to-top:hover{
  color:white;
  background:black;
}

@keyframes float {
  0% { transform: translateY(10px); }
  100% { transform: translateY(30px); }
}

@-webkit-keyframes float {
  0% { transform: translateY(10px); }
  100% { transform: translateY(30px); }
}

ستحصل بعد ذلك على زر “الذهاب إلى الأعلى” جميل وجذاب :smiley:

(إنه يتحرك ^^! شاهد كيف يعمل هنا: forum.fususu.com/t/topic/21/last)

48%20AM
48%20AM530×608 47.3 KB

23

يبدو رائعًا @Phuong_SuSu، لكنني احتجت إلى الضغط عدة مرات للوصول إلى أعلى موضوع طويل.

24

عادةً، عندما يضغط المستخدمون على موضوع ما، يقوم Discourse بتوجيههم إلى آخر رد، وتُخفى العديد من الردود القديمة. أما الزر فينقلك ببساطة إلى رأس الموضوع، فتظهر الردود الأخرى. لذا فإن هذا الحل يعمل بشكل أفضل إذا قام الأشخاص بالتمرير من البداية ثم النقر عليه ^^! أتساءل هل هناك حل، أم يجب استخدام بعض سكريبتات JavaScript ^^

25

ليس تمامًا. إنه يرسلهم إلى آخر رد لم يقرأوه بعد.

سيؤدي النقر على العنوان إلى إعادتك إلى الأعلى.

26

هذا يعمل بشكل رائع وسيكمل مكون السمة الذي أملكه Scroll to Top Component - #17 by davidkingham تمامًا. لا أستطيع تحديد كيفية دمج الاثنين معًا، وإذا تمكنت أنت أو أي شخص آخر من المساعدة أو تقديم طلب دمج (PR) فسيكون ذلك رائعًا :+1: