BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

Scroll hacia arriba sin utilizar plugins en jQuery

25/ABR/2013 14.177 visitas Ver comentarios
Scroll hacia arriba sin utilizar plugins en jQuery

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

Lo que vamos a hacer en este post es agregar dinámicamente un botón para volver a la parte superior de la web si nuestra página tiene scroll vertical.

Básicamente controlaremos la posición vertical de nuestra página y si ésta supera un tamaño especificado en el código javascript, aparecerá un botón con una flecha apuntando hacia arriba en la parte inferior derecha de nuestra pantalla.

Lo curioso de ésto es que, por una vez, lo haremos sin utilizar ninguna clase de plugin y lo haremos de tal manera que no haga falta escribir el botón en todos los html de nuestra web -aunque en lenguajes dinámicos agregarlo en alguno de los includes que utilices evitaría una línea de javascript-.

Si vamos por partes, lo primero que vemos en el código 1 es que llamamos a jQuery (en este caso la v1.9) y tenemos que tener en cuenta que si utilizas una versión inferior a la 1.7 hay una parte del código que no funcionará (básicamente la del código 3, donde se usa el ON).

El código 2 sirve para personalizar el aspecto y posición del botón. En mi caso tendrá 64px de ancho por 64px de alto, con una imagen de fondo, un texto ubicado fuera de los límites del botón y una opacidad del 60% que se pondrá al 100% al pasar el ratón por encima del mismo.

Y, finalmente, nuestro código 3, es el que hará el juego. La primer línea, como expliqué antes, agregará al BODY de nuestra página el botón (por CSS está marcado que no se vea con un display:none).

La segunda parte, se encargará de controlar el scroll vertical sobre la ventana del navegador y si éste es superior a 70px, realizará un FADE IN del botón (es decir, se mostrará con una pequeña animación de alpha) y, finalmente, la tercera parte será la encargada de controlar la acción de ese botón, ejecutando un desplazamiento superior hasta alcanzar la parte superior de nuestra web.

Tienes una demo funcional en el botón que sale más arriba, no hay más de lo que ves y espero que te guste. Si quieres hacer alguna aportación, aquí abajo tienes los comentarios.

Código 1 - HTML
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Código 2 - CSS
.volverarriba{width:64px;height:64px;opacity:0.6;position:fixed;bottom:20px;right:20px;display:none;background:transparent url(scroll.png) no-repeat;display:none;overflow:hidden;text-indent:-250px}
	.volverarriba:hover{opacity:1}
Código 3 - JAVASCRIPT
$(document).ready(function()
	{
		$("body").append("Volver arriba"); // Agregamos el botón con la flecha
		$(window).scroll(function()
		{
			if ($(this).scrollTop() > 70) $('.volverarriba').fadeIn();
			else $('.volverarriba').fadeOut();
		});
		/* IMPORTANTE: si usas jQuery <1.7 esto de abajo no funcionará */
		$(document).on("click",".volverarriba",function(e)
		{
			e.preventDefault();
			$("html, body").stop().animate({ scrollTop: 0 }, "slow");
		});
	});

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 22 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018