topLink con jQuery

topLink es un plugin creado por David Walsh utilizando jQuery.

Cuando tenemos una pagina muy extensa nos vemos en la necesidad de bajar con el scroll, este plugin nos facilita un link cuando lo necesitemos, aparecera y desaparecera segun la posicion en que nos encontremos.

Para tener esta opcion en nuestra web solo tenemos que realizar estos simples pasos:

Crear el CSS para el boton

Esto lo pondremos dentro del head de nuestra pagina.

#top-link
{ 
	display:none; 
	position:fixed; 
	right:5px; 
	bottom:5px; 
	color:green; 
	font-weight:bold; 
	text-decoration:none; 
	border:1px solid green; 
	background:Lightgreen; 
	padding:10px; 
}

Ahora debemos incluir la libreria jQuery 1.2.6 y el plugin ScrollTo dentro del head

<script type="text/javascript" src="jquery-1.2.6.js" ></script>
<script type="text/javascript" src="jquery.scrollTo.js" ></script>

Seguido colocaremos el plugin topLink dentro del head y despues de haber incluido las dos librerias

//plugin
jQuery.fn.topLink = function(settings) 
{
	settings = jQuery.extend({
		min: 1,
		fadeSpeed: 200,
		ieOffset: 50
	}, settings);
	
	return this.each(function() {

		var el = $(this);
		el.css('display','none');
		$(window).scroll(function() {
			//IE hack
			if(!jQuery.support.hrefNormalized) {
				el.css({
					'position': 'absolute',
					'top': $(window).scrollTop() + $(window).height() - settings.ieOffset
				});
			}
			if($(window).scrollTop() >= settings.min)
			{
				el.fadeIn(settings.fadeSpeed);
			}
			else
			{
				el.fadeOut(settings.fadeSpeed);
			}
		});
	});
};

Justo despues de abrir la etiqueta body colocaremos el enlace aparecera y desaparecera en nuestra web.
El href debe hacer referencia al id del primer elemento que tengas en tu web, en este caso es #top.

<a href="#top" id="top-link">Subir</a>

El ultimo paso sera incluir el script que llamara al plugin topLink

//usage w/ smoothscroll
$(document).ready(function() {

	$('#top-link').topLink({
		min: 400,
		fadeSpeed: 500
	});

	$('#top-link').click(function(e) {
		e.preventDefault();
		$.scrollTo(0,300);
	});
});

Esto es todo, como buen ejemplo desplaza hasta el final esta pagina y fijate en la parte inferior derecha.

También te puede interesar