Scroll hacia arriba con jQuery

c
junio 17, 2013

Categorías: JQuery, Tutoriales – Tags: JQuery, scroll

Hoy les explico de forma rápida como hacer scroll hacia arriba cuando una página tiene mucho contenido y como hacer para que el scroll aparezca o desaparezca según donde estemos ubicados en la página.

Como introducción se pueden leer el tutorial de hacer scroll con jQuery sin plugins que es más o menos lo mismo y sirve por ejemplo para que desde un menu en la parte superior podamos movernos a diferentes secciones de la página, y luego con este pequeño código volver hacia arriba.

Para ello primero definimos la flecha encargada de aparecer cuando hacemos scroll. Para ello insertamos un simple link:

Le aplicamos un poco de CSS. Puede buscar una imagen en google y adaptar el css a ella.

.scrollUp{ width:40px; height:40px; opacity:0.6; position:fixed; bottom:90px; /* conviene que quede arriba del footer */ left:30px; /* Izquierda o derecha según el diseño*/ display:none; background: url(‘arrow_up.png’) no-repeat; /* nuestra imagen*/}

Como ven lo que hacemos es que se vea en la esquina inferior izquierda la flechita con un poco de transparencia. Por defecto no mostramos la imagen, eso lo haremos con jQuery

Y por último el código javascript que necesitamos:

$(window).scroll(function(){ if ($(this).scrollTop() > 100) { $(‘.scrollUp’).fadeIn(); } else { $(‘.scrollUp’).fadeOut(); }});$(document).ready(function(){ $(‘.scrollUp’).click(function(){ $(“html, body”).animate({ scrollTop: 0 }, 600); return false; });})

Tenemos dos partes, la primera es la encargada de ver cuando pixeles tenemos de scroll antes de mostrar o ocultar la flechita. En mi código he puesto 100 pero lo pueden cambiar por el valor que quieran. Este evento se dispara cada vez que la ventana hace scroll.
La segunda parte controla el evento click que have subir el scroll hacia arriba cuando hacemos click. Al subir hasta arriba tendremos menos de 100 pixeles de scroll por lo que la flecha desaparece.

Espero que les haya servido. Saludos!!

Programador freelancer y emprendedor en sueños. Contento de ser mi jefe y poder hacer lo que me gusta. WordPress es mi principal fuente de ingreso y me escribo tanto para ayudar como para tener una guia de memoria. Quieres contratarme? Déjame un mensaje.

Más Posts de Damián Logghe – Web

Mas que wordpress

Comparte en las redes sociales: