Help creating a jump to top button

Sviluppatore
22

Ho trovato un metodo semplice, senza Java, solo CSS e HTML.

  1. Inserisci questo nell’area <after header>:

    <a name="top"></a>
<a class="to-top" href="#top" title="Vai in alto">^</a>

  2. Poi un po’ di CSS creativo:

    .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); }
}

Otterrai così questo bellissimo e accattivante pulsante “vai in alto” :smiley:

(si muove ^^! vedi come funziona qui: forum.fususu.com/t/topic/21/last)

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

23

Sembra figo, @Phuong_SuSu, ma ho dovuto toccare un paio di volte per arrivare in cima a un argomento lungo.

24

Di solito, quando gli utenti cliccano su un argomento, Discourse li porta all’ultima risposta, nascondendo molte risposte precedenti. Il pulsante ti sposta semplicemente all’intestazione, facendo apparire le altre risposte.
Quindi questa soluzione funziona meglio se le persone scorrono dall’inizio e poi lo toccano ^^! Mi chiedo se esista una soluzione o se dobbiamo usare del JavaScript ^^

25

Non esattamente. Li porta all’ultima risposta che non hanno ancora letto.

Cliccando sul titolo verrai riportato all’inizio.

26

Questo funziona in modo eccellente e si integrerebbe perfettamente con il componente tema che ho Scroll to Top Component - #17 by davidkingham. Non riesco a capire esattamente come integrarli insieme; se tu o qualcun altro poteste aiutare o inviare una PR, sarebbe fantastico :+1: