Un clásico en toda página web es el botón "Ir hacia arriba" o "Subir", el cual al ser pulsado, desplaza el scroll hasta el principio. Hoy te quiero compartir un pequeño botón que he desarrollado con JavaScript puro, bastante ligero que puedes implementar en tus proyectos.
Instalar
Agrega la siguiente estructura HTML en el cuerpo de tu Sitio web, recomiendo arriba de </body>, dependiendo de la plataforma o tu proyecto este paso puede ser diferente:
<button class="toTop" id="toTop">
<svg viewBox="0 0 24 24">
<path d="m4 16 8-8 8 8"></path>
</svg>
</button>
Ahora 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.
/* 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;
}
Por último, y 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>:
<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>
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;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
border-radius: 0.5rem;
padding: 0.75rem;
color: #fff;
}
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.
