Efecto Scroll animado en jQuery

scroll jQuery

Hoy les traigo otro tutorial jQuery en donde vamos a ver un sencillo efecto. Y es que en muchos blogs como Vida MRR, hay veces donde tenemos que hacer demasiado scroll, o bajar la barra de desplazamiento porque hay mucho contenido, y lo peor de todo es que es cansado, así que una idea es tener un botón que nos facilite eso.

Después del salto es traigo un tutorial de efecto scroll animado en jQuery, para que aparezca cuando empecemos a bajar la página y desaparezca cuando ya esté arriba.

Demo

Estructura HTML

Lo primero es construir nuestro botón que va a aparecer, para eso necesitamos tres líneas de código como las siguientes:

En donde tenemos que hay un link que nos va a llevar hasta arriba de la página, una span que va a cargar la imagen y un pequeño texto para acompañar el botón, eso es todo. Por cierto, para que resulte el efecto debe haber suficiente contenido para que la barra de desplazamiento aparezca, así que asegúrense de rellenar con texto la página lo suficiente para que funcione.

Hojas de estilos

Necesitamos algunos estilos para poder darle forma y posición al botón, por eso la hoja de estilos es la siguiente:

No olviden poner todo esto en la etiqueta <style> debajo de la etiqueta <head>. Eso si, donde dice flecha.png cambien eso por la dirección URL de su propia imagen, de lo contrario no les va a salir nada

jQuery

Por último basta hacer un poco de programación. Lo bueno de este tutorial es que no hay archivos extra, basta con copiar el código o hacerlo uno mismo siguiendo la lógica del programita.

Les explico lo que hace. Lo primero es ocultar el botón, después creamos una función para verificar si el scroll está a más de 100 pixeles de distancia, para que si es cierto aparezcamos el botón, y sino lo contrario, que se desvanezca. Después al botón le añadimos una función para animar la subida y que nos lleve hasta arriba de nuevo.

Vía webdesignerwall

¿Tuviste problemas con el tutorial?