Help creating a jump to top button

Entwickler
22

Ich habe eine einfache Methode gefunden, ohne Java, nur mit CSS & HTML.

  1. Füge dies in den <after header> ein:

    <a name="top"></a>
<a class="to-top" href="#top" title="Nach oben gehen">^</a>

  2. Dann ein wenig ausgefallenes 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); }
}

Dann erhältst du diesen schönen und attraktiven „Nach oben“-Button :smiley:

(er bewegt sich ^^! Siehe es live hier: forum.fususu.com/t/topic/21/last)

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

23

Sieht cool aus, @Phuong_SuSu, aber ich musste ein paar Mal tippen, um nach oben zu einem langen Thema zu gelangen.

24

Normalerweise führt ein Klick auf ein Thema in Discourse zur neuesten Antwort, wobei viele ältere Antworten ausgeblendet werden. Der Button bringt dich lediglich zum Kopf des Themas, woraufhin weitere Antworten sichtbar werden. Diese Lösung funktioniert also am besten, wenn man von Anfang an scrollt und dann darauf tippt ^^! Ich frage mich, ob es eine Lösung gibt oder ob wir JavaScript verwenden müssen ^^

25

Nicht ganz. Es leitet sie zur neuesten Antwort, die sie noch nicht gelesen haben.

Ein Klick auf den Titel bringt Sie zurück nach oben.

26

Das funktioniert hervorragend und würde perfekt zum Theme-Komponenten-Beitrag passen, den ich habe: Scroll to Top Component - #17 by davidkingham. Ich komme nicht ganz dahinter, wie man diese beiden miteinander integriert. Wenn du oder jemand anders helfen oder einen PR einreichen könntet, wäre das fantastisch :+1: