A continuacion les presento un sencillo efecto “scroll to up” muy comun en los sitios web.

primero necesitamos crear el codigo html que luego animaremos con jquery y estilizaremos con css.

muy sencillo, esto lo ubicamos en el footer de nuestro sitio web, si es una plantilla html con copiar el codigo antes de </body> bastara, si en cambio en un template wordpress u otro cms deberan editar la plantilla footer.php o similar y agregar el codigo.

Ahora lo estilizaremos un poco con css.

bastante simple, aunque debo decir que el estilo css presentado en muy básico (no es mi fuerte xD), si quisieramos podriamos utilizar una imagen en lugar de un texto para la etiqueta span, y modificar ligeramente el css.

Pero hasta el momento aunque se ve bien no es mas que un texto o una imagen en pantalla, dotemoslo de vida con un sencillo codigo jquery.

Y como resultado tendriamos algo similar a estas capturas.

scroll to up texto

scroll to up imagen