HTML5 y CSS3

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?

DEMO

¿Os ha gustado? Para instalarlo solo hay que seguir 4 sencillos pasos.

1 Descargar plugin

Podés bajarlo directamente de este enlace

Descargar

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.