Recursos y Descargas

Esto no es un blog. Es una sección que programé para ir publicando aquellas cositas que me parecen interesantes y, por cualquier motivo, quiero tener a mano. Copia lo que quieras, usa lo que quieras (pero respeta sus licencias).

Scroll to top, un plugin jQuery para ´volver arriba´

Escrito por: Martín el 24-02-2010 08:22:35

Scroll to top, un plugin jQuery para ´volver arriba´

Este plugin es un tanto antiguo, pero nunca está de más utilizarlo en páginas con grandes cantidades de texto o mucho scroll vertical.

Básicamente se encarga de hacer aparecer de la nada un enlace abajo de todo una vez que comenzamos a hacer scroll, que nos devolverá a la posición original de la web.

Su uso es muy simple y totalmente personalizable mediante unas pocas líneas de CSS.

El código:
Consta de 3 partes, el html (código 1), el css (código 2) y el javascript (código 3)

Vía: Brian Cray.

Código XHTML

<body>
<div id="top"></div>
<!-- put all of your normal <body> stuff here -->
<div id="message"><a href="top">Volver arriba</a></div>
</body>

Código CSS

#message a
{
	/* display: block before hiding */
	display: block;
	display: none;
 
	/* link is above all other elements */
	z-index: 999; 
 
	/* link doesn't hide text behind it */
	opacity: .8;
 
	/* link stays at same place on page */
	position: fixed;
 
	/* link goes at the bottom of the page */
	top: 100%;
	margin-top: -80px; /* = height + preferred bottom margin */
 
	/* link is centered */
	left: 50%;
	margin-left: -160px; /* = half of width */
 
	/* round the corners (to your preference) */
	-moz-border-radius: 24px;
	-webkit-border-radius: 24px;
 
	/* make it big and easy to see (size, style to preferences) */
	width: 300px;
	line-height: 48px;
	height: 48px;
	padding: 10px;
	background-color: #000;
	font-size: 24px;
	text-align: center;
	color: #fff;
}

Código JAVASCRIPT

$(function () { // run this code on page load (AKA DOM load)
 
	/* set variables locally for increased performance */
	var scroll_timer;
	var displayed = false;
	var $message = $('#message a');
	var $window = $(window);
	var top = $(document.body).children(0).position().top;
 
	/* react to scroll event on window */
	$window.scroll(function () {
		window.clearTimeout(scroll_timer);
		scroll_timer = window.setTimeout(function () { // use a timer for performance
			if($window.scrollTop() <= top) // hide if at the top of the page
			{
				displayed = false;
				$message.fadeOut(500);
			}
			else if(displayed == false) // show if scrolling down
			{
				displayed = true;
				$message.stop(true, true).show().click(function () { $message.fadeOut(500); });
			}
		}, 100);
	});
});