Help creating a jump to top button

Dev
22

Encontrei uma maneira simples, sem Java, apenas CSS e HTML.

  1. Coloque isso no <after header>:

    <a name="top"></a>
<a class="to-top" href="#top" title="Ir para o topo">^</a>

  2. Depois, um pouco de CSS elegante:

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

Assim, você terá esse lindo e atraente botão “Ir para o topo” :smiley:

(ele está se movendo ^^! veja em ação aqui: forum.fususu.com/t/topic/21/last)

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

23

Parece legal @Phuong_SuSu, mas precisei dar algumas toques para chegar ao topo de um tópico longo.

24

Normalmente, quando os usuários clicam em um tópico, o Discourse os leva para a última resposta, e muitas respostas antigas ficam ocultas. O botão apenas te leva ao cabeçalho, e aí as outras respostas aparecem.
Então, essa solução funciona melhor se as pessoas rolarem a página desde o início e depois tocarem no botão ^^! Gostaria de saber se há uma correção ou se precisamos usar algum JavaScript ^^

25

Não exatamente. Ele os leva para a última resposta que eles ainda não leram.

Clicar no título levará você de volta ao topo.

26

Isso funciona brilhantemente e complementaria perfeitamente o componente de tema que tenho em Scroll to Top Component - #17 by davidkingham. Não consigo entender exatamente como integrar os dois; se você ou alguém mais puder ajudar ou enviar um PR, seria fantástico :+1: