Cuanto más largas son nuestras páginas, más necesario se nos hace la necesidad de volver a arriba. Y nada más sencillo que un botón que al ser pulsado suba nuestro scroll de una forma elegante. Pero no nos vale cualquier manera, debe serguir unos requisitos:
- Suave, para que el usuario vea el movimiento y no se pierda.
- Animado, para que el movimiento no sea lineal y aburrido.
- Sin JQuery, cuanto menos dependencias externas tengamos más ligera será nuestra web.
- Fácil, tanto de implementar en el presente como de modificar en el futuro.
Por ello he desarrollado un plugin realmente sencillo de utilizar. Se llama simplescrollup. No me he complicado la vida con el nombre. ¿Podéis ver una demo?
¿Os ha gustado? Para instalarlo solo hay que seguir 4 sencillos pasos.
1 Descargar plugin
Podés bajarlo directamente de este enlace
o por npm
npm install simplescrollup
o por yarn
yarn add simplescrollup
2 Enlazar plugin
En vuestro página, justo antes de que acabe body, añadimos:
<script src="simplescrollup.js"></script>
Quedaría así.
<html>
<head>
</head>
<body>
<!-- Tu contenido HTML -->
<script src="simplescrollup.js"></script>
</body>
</html>
3 Añadimos botón.
Debe tener la siguiente estructura. Cambia tu texto o pon un icono. Lo que quieras.
<a href="#up" class="simplescrollup__button simplescrollup__button--hide">Tu texto</a>
Quedaría así.
<html>
<head>
</head>
<body>
<!-- Tu contenido HTML -->
<a href="#up" class="simplescrollup__button simplescrollup__button--hide">Tu texto</a>
<script src="simplescrollup.js"></script>
</body>
</html>
4 Añade CSS
El botón debe estar fijo, y además tener una pequeña animación para mostrar u ocultarse cuando esta el scroll llega a arriba. Para ello hay 3 clases esenciales, que podrás editar cuando quieras.
.simplescrollup__button {
position: fixed;
bottom: 3rem;
right: 3rem;
transition: 1s all;
z-index: 10000;
}
.simplescrollup__button--show {
transform: translateX(0);
}
.simplescrollup__button--hide {
transform: translateX(100px);
}
Quedaría así.
<html>
<head>
<style>
.simplescrollup__button {
position: fixed;
bottom: 3rem;
right: 3rem;
transition: 1s all;
z-index: 10000;
}
.simplescrollup__button--show {
transform: translateX(0);
}
.simplescrollup__button--hide {
transform: translateX(100px);
}
</style>
</head>
<body>
<!-- Tu contenido HTML -->
<a href="#up" class="simplescrollup__button simplescrollup__button--hide">Tu texto</a>
<script src="simplescrollup.js"></script>
</body>
</html>
¡Y eso es todo!
Si queréis colaborar en el proyecto podéis ir a GitHub o dejarme un comentario.
{{ comments.length }} comentarios