Un clásico en toda página web es el botón “Ir hacia arriba” , “Subir” o “Desplazarse hacia arriba”, el cual al ser pulsado, desplaza el scroll hasta la parte superior. Hoy te quiero compartir este pequeño botón que hemos desarrollado con JavaScript puro, bastante ligero que puedes implementar en tu blog o proyectos.

Instalar

Agrega la siguiente estructura HTML en el cuerpo de tu Sitio web, recomiendo arriba de: </body> , este paso puede ser diferente dependiendo de la plataforma o tu proyecto:

HTML:

<button class="toTop" id="toTop">
  <svg viewBox="0 0 24 24">
    <path d="m4 16 8-8 8 8"></path>
  </svg>
</button>

Ahora, lo que hará que todo funcione es el código JavaScript, agrega el siguiente fragmento junto al resto del código javascript de tu pagina web, si no tienes donde escribirlo, prueba arriba de: </body> :

JavaScript:

<script>/*<![CDATA[*/
const toTop = (() => {
  let button = document.getElementById("toTop");
  window.onscroll = () => {
    button.classList[
        (document.documentElement.scrollTop > 200) ? "add" : "remove"
      ]("is-visible")
  }
  button.onclick = () => {
    window.scrollTo({
      top:0, behavior:"smooth"
    })
  }
})();/*]]>*/</script>

Por último, incluye los siguientes estilos, por ejemplo, si estas usando WordPress agrégalos en tu archivo: style.css, en el caso de Blogger utiliza la opción Agregar CSS del Diseñador de Plantilla.

CSS:

/* Botón Subir */
.toTop {
  border: none;
  display: flex;
  cursor: pointer;
  transition: opacity 0.3s, transform 0.3s;
  /* posición */
  position: fixed; right: 1rem; bottom: 1rem; z-index: 9999;
}
.toTop:not(.is-visible) {
  pointer-events: none;
  opacity: 0;
  transform: translateY(-2rem);
}
.toTop svg {
  stroke-width: 3px;
  stroke: currentColor;
  fill: none;
  width: 24px;
}
/* Personalizar */
.toTop {
  background-color: #252525;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  border-radius: 0.5rem;
  padding: 0.75rem;
  color: #fff;
}

Y listo, no hay nada mas por hacer. Si agregaste el código correctamente podrás ver un botón “Subir” al desplazarte por la página. Si no lo haz conseguido, deja un comentario y trataré de ayudarte de forma más personalizada.

Personalizar

No hay mucho código, por lo tanto puedes editar en cualquiera de los pasos lo que consideres necesario, aún asi, he separado los estilos de “aspecto”, concretamente esta parte:

/* Personalizar */
.toTop {
  background-color: #252525; /* Color de fondo del Botón */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* Sombras del Botón */
  border-radius: 0.5rem; /* Redondez del Botón */
  padding: 0.75rem; /* Tamaño del Botón */
  color: #fff; /* Color del Icono del Botón */
}

Son todos los estilos que visualmente le dan forma al botón, siéntete libre de editar el código o escribir tus propios estilos y darle un nuevo aspecto al botón.

Conclusión

Eso ha sido todo, un pequeño aporte pero que de igual manera espero te sea de mucha utilidad, si fue asi no olvides compartir este articulo, siempre lo agradezco ya que me ayuda a crecer, cualquier inquietud no dudes en dejarla en los comentarios.