Help creating a jump to top button

Dev
22

J’ai trouvé une solution simple, sans Java, uniquement en CSS et HTML.

  1. Insérez ceci dans le <after header> :

    <a name="top"></a>
<a class="to-top" href="#top" title="Aller en haut">^</a>

  2. Ensuite, un peu de CSS élégant :

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

Vous obtiendrez alors ce magnifique et attrayant bouton « Aller en haut » :smiley:

(il bouge ^^! voyez-le en action ici : forum.fususu.com/t/topic/21/last)

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

23

Ça a l’air super, @Phuong_SuSu, mais j’ai dû tapoter plusieurs fois pour remonter en haut d’un sujet long.

24

Habituellement, lorsque les utilisateurs cliquent sur un sujet, Discourse les redirige vers la dernière réponse, masquant ainsi de nombreuses anciennes réponses. Le bouton vous ramène simplement à l’en-tête, puis les autres réponses apparaissent.
Cette solution fonctionne donc mieux si les gens font défiler depuis le début, puis le tapotent ^^ ! Je me demande s’il existe une solution ou si nous devons utiliser du JavaScript ^^

25

Pas tout à fait. Cela les envoie à la dernière réponse qu’ils n’ont pas encore lue.

Cliquez sur le titre pour revenir en haut.

26

Cela fonctionne à merveille et compléterait parfaitement le composant de thème que j’ai Scroll to Top Component - #17 by davidkingham. Je n’arrive pas tout à fait à comprendre comment intégrer ces deux éléments ensemble. Si vous ou quelqu’un d’autre pouviez aider ou soumettre une PR, ce serait fantastique :+1: