Help creating a jump to top button

Desarrollador
22

Encontré una forma sencilla, sin Java, solo CSS y HTML.

  1. Coloca esto en <after header>:

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

  2. Luego, un poco de CSS con estilo:

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

Así obtendrás este hermoso y atractivo botón “Ir arriba” :smiley:

(¡Se mueve ^^! Míralo en acción aquí: forum.fususu.com/t/topic/21/last)

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

23

Se ve genial @Phuong_SuSu, pero tuve que tocar varias veces para llegar a la parte superior de un tema largo.

24

Normalmente, cuando los usuarios hacen clic en un tema, Discourse los lleva a la última respuesta y muchas respuestas antiguas se ocultan. El botón simplemente te lleva al encabezado y luego aparecen las demás respuestas.
Así que esta solución funciona mejor si las personas hacen scroll desde el principio y luego lo tocan ^^! Me pregunto si hay una solución o si debemos usar algo de JavaScript ^^

25

No exactamente. Los lleva a la última respuesta que aún no han leído.

Hacer clic en el título te devolverá al principio.

26

Esto funciona de maravilla y complementaría perfectamente el componente de tema que tengo Scroll to Top Component - #17 by davidkingham. No termino de entender cómo integrarlos ambos; si tú o alguien más pudiera ayudar o enviar una PR, sería fantástico :+1: