Animación para ir al top de la web con scrollTop de Jquery

Vamos a ver en este breve tutorial cómo hacer para volver al top de la web cuando estamos debajo de la web es decir el la informacion que se encuentra en el bottom de la web, y vamos a hacerlo de una manera animada utilizando la librería jquery , un script y el código css. Lo que queremos es hacer una animacion que haga un desplazamiento bien formado.

 

En el documento Html vamos a agregar los siguientes scripts dentro de las etiquetas <head></head>,

 

Básicamente notamos un enlace a la librería jquery.min.js en su versión online, y la segunda parte es el script que nos va a hacer la animación, básicamente lo que dice este código es: cuando me encuentre en la zona top de la web, esconde el botón para ir arriba con el id back-top, y cuando salga de esa zona de arriba me aparezca este botón con un efecto de desvanecimiento para poder regresar a la parte posterior de la web.

seguimos con el body:

Si notamos el id back-top es el que nos hara la tarea de mostrar en enlace y la imagen del boton para volver arriba, es importante colocarlo en el bottom de la web es decir la parte de abajo.

y los css que sin ellos no seria esto posible:

Y listo, eso es todo ya podemos implementar este sistema en nuestro sitio, es muy importante para darle comodidad al visitante de nuestra web, claro cuando tenemos contenido extenso. Hay muchas maneras de colocar este sistema, este es solo una mas.

About the author

Johan Ricardo Niebles. Administrador y creador de este blog, Front-end (HTML + CSS + JS).con mas de 4 años de experiencia en el magico mundo web. Johan Ricardo