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

Escrito por: el 24-02-2010 08:22:35 y leído 1304 veces

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);
	});
});

Categorías: Jquery • Plugin • •

Artículos relacionados:


100 Búsquedas de este artículo:

scroll to top • scroll to top jquery • scroll top • jquery scroll to top • jquery ir arriba • jQuery Plugin: Scroll to Top • boton top jquery • scroll top jquery • jquery scrolltop • volver arriba jquery • ir arriba jquery • top scroll jquery • scrolltotop • scrollTop jquery • jquery arriba • scroll arriba • ir hasta arriba pagina jquery • ir al top jquery • volver arriba con jquery • ir arriba con jquery • posicionamiento scroll arriba • jquery scroll vertical • jquery scrollTo mover scroll de navegador • volver al top jquery • jquery ajax scroll vertical • plugin volver arriba • To-Top scroller • ejemplo para volver arriba jquery • top scroll • jquery bajar el scroll abajo • scroll top para blogger • boton ir al top jquery • detectar posicion scroll para menu jquery • jQuery - Scroll To Top • jquery top scroll • ir al top con jquery • boton de ir arriba con jquery • jquery scroll show • jquery volver arriba • scroll para arriba jquery • jquery scroll top • scroll text plugin • plugin jquery para scroll • ejemplo scroll to jquery • como hacer para posicionar el scroll arriba • scrolltotop(); • scrolling top jquery • jquery go to top when scroll • scroll to div top • scroll in top javascript • ia al top css • css div ir al final del scroll • plugin de top cs • jquery scrollbar plugin • go to top jquery scroll • volver scroll arriba jquery • jquery scoll to top • plugin ir al top jquery • jquery scrollto top • scroll al final javascript • plugin jquery scroll to top • scroll_to top • scroll to top in div • subir scrool top • posicionar scroll en el top jquery • div ir arriba • jquery plugin scrollto animado ipad • enlace para ir al top de la pagina • usos scroll to • volver arriba jquery link • subir el scroll para arriba con javascript • jquery dialog position top • volver al top js • div para regresar arriba • ir a top de un div jquery • botones para plugin ui totop • regresar scroll a top con javascript • volver al top con jquery • scroll para arriba con jquery • scroll start top con jquery php • scrollto jquery ejemplos • boton ir arriba scroll • best scroll jquery plugin • scroll to top text • jquery regresar posicion • jquery boton para subir hacia arriba el scroll vertical • on load scroll to top • scrollbar top jquery • subir la pagina al top jquey • jquery scroll arriba y abajo • como regresar hasta arriba de la pagina jquery • como poner el javascript scroll to top en • plugin arriba con jquery • scroll barra lateral con tope abajo y arriba css • plugin para ir arriba • scrolling hacia arriba y abajo con jquery • jquery plugin ir a top page • programar boton scroll to top jquery css • posicionar scrolltop div jquery • top scroll div •

Traduce esta página

Nube de Tags

acordeón actionscript ajax alert ampliar imágenes android antes y después as audio aumentar letra barra desplazamiento blur bordes redondeados botón derecho calcular distancia calendario chart chrome collapse columnas combobox contar caracteres contar followers contextual css cu3er códigos date-picker descargas desenfoque desplazamiento dhtml disminuir letra dominios editor enlaces externos error 404 estrellitas expander fade fecha file upload filtrar contenido flash font size formulario formularios fotografías fpdf frames galería gmail google google docs gratis headers htaccess html html5 iconos ie6 igualar columnas inyección cabeceras ipad iphone javascript jquery jquery ui json lavalamp librería librerías lightbox limitar caracteres links lista listas listbox mail injection maquetación marcos mensajes menu menú menú lateral miniaturas mootools mouseover mp3 multinivel mysql máscaras móvil navegadores no conflict notas adhesivas notificaciones oauth ofuscador ordenar organigrama pdf php phpmailer picker player playlist plugin png portfolio preview reproductor reproductor de música safari scroll scrollto select selector de color sistema de votación slider snippets spam star rating subir ficheros switch mode tablas tamaño texto target blank textarea thumbnail tooltip twitter usuarios activos validacion validación validate videos vtip wap webkit www wysiwyg youtube zoom

Libros de Romantica

Los 20 posts más populares

Usuarios Conectados...

  • Hay 8 usuario/s en esta página
¿Sabías qué?
Yo digo
Miembro de

BlocketPCSubflashADWE

© 2012 Martin Iglesias - Todos los derechos reservados

Creative Commons LicenseValid XHTML 1.0 Transitional¡CSS Válido!Suscribete a mi RSSHumans TXT