Help creating a jump to top button

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)

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

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 ^^

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.

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: