Si disponemos de una página con un contenido demasiado extenso, y tenemos un scroll vertical demasiado largo, puede ser una buena idea poder ofrecer a nuestros visitantes la oportunidad de poder desplazarse a la parte superior de la página de una forma sencilla y rápida.

Ahí es donde entra en juego este plugin, el cual nos inserta en el documento un icono en la esquina inferior derecha en posición fija, que una vez clickamos, nos desplaza suavemente el documento al principio (arriba). El icono no siempre estará visible, solamente cuando desplazamos el scroll hacia abajo a una determinada posición en píxels (esta posición la podemos configurar fácilmente).

Además de poder especificar a que altura será visible el icono, también podremos definir hasta que punto subirá el documento, muy útil, por ejemplo, en el caso de una página con un gran header, donde deseemos que el icono nos suba tan solo al menú.

Primero, crearemos el archivo del plugin, el cual llamaremos scrolltopcontrol.js, en el cual incluiremos el siguiente código:

//** jQuery Scroll to Top Control script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.
//** Available/ usage terms at http://www.dynamicdrive.com (March 30th, 09')
//** v1.1 (April 7th, 09'):
//** 1) Adds ability to scroll to an absolute position (from top of page) or specific element on the page instead.
//** 2) Fixes scroll animation not working in Opera.

var scrolltotop={
	//startline: Integer. Number of pixels from top of doc scrollbar is scrolled before showing control
	//scrollto: Keyword (Integer, or "Scroll_to_Element_ID"). How far to scroll document up when control is clicked on (0=top).
	setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
	controlHTML: '<img src="up.png" style="width:48px; height:48px" />', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
	controlattrs: {offsetx:5, offsety:5}, //offset of control relative to right/ bottom of window corner
	anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

	state: {isvisible:false, shouldvisible:false},

	scrollup:function(){
		if (!this.cssfixedsupport) //if control is positioned using JavaScript
			this.$control.css({opacity:0}) //hide control immediately after clicking it
		var dest=isNaN(this.setting.scrollto)? this.setting.scrollto : parseInt(this.setting.scrollto)
		if (typeof dest=="string" && jQuery('#'+dest).length==1) //check element set by string exists
			dest=jQuery('#'+dest).offset().top
		else
			dest=0
		this.$body.animate({scrollTop: dest}, this.setting.scrollduration);
	},

	keepfixed:function(){
		var $window=jQuery(window)
		var controlx=$window.scrollLeft() + $window.width() - this.$control.width() - this.controlattrs.offsetx
		var controly=$window.scrollTop() + $window.height() - this.$control.height() - this.controlattrs.offsety
		this.$control.css({left:controlx+'px', top:controly+'px'})
	},

	togglecontrol:function(){
		var scrolltop=jQuery(window).scrollTop()
		if (!this.cssfixedsupport)
			this.keepfixed()
		this.state.shouldvisible=(scrolltop>=this.setting.startline)? true : false
		if (this.state.shouldvisible && !this.state.isvisible){
			this.$control.stop().animate({opacity:1}, this.setting.fadeduration[0])
			this.state.isvisible=true
		}
		else if (this.state.shouldvisible==false && this.state.isvisible){
			this.$control.stop().animate({opacity:0}, this.setting.fadeduration[1])
			this.state.isvisible=false
		}
	},

	init:function(){
		jQuery(document).ready(function($){
			var mainobj=scrolltotop
			var iebrws=document.all
			mainobj.cssfixedsupport=!iebrws || iebrws && document.compatMode=="CSS1Compat" && window.XMLHttpRequest //not IE or IE7+ browsers in standards mode
			mainobj.$body=(window.opera)? (document.compatMode=="CSS1Compat"? $('html') : $('body')) : $('html,body')
			mainobj.$control=$('<div id="topcontrol">'+mainobj.controlHTML+'</div>')
				.css({position:mainobj.cssfixedsupport? 'fixed' : 'absolute', bottom:mainobj.controlattrs.offsety, right:mainobj.controlattrs.offsetx, opacity:0, cursor:'pointer'})
				.attr({title:'Scroll Back to Top'})
				.click(function(){mainobj.scrollup(); return false})
				.appendTo('body')
			if (document.all && !window.XMLHttpRequest && mainobj.$control.text()!='') //loose check for IE6 and below, plus whether control contains any text
				mainobj.$control.css({width:mainobj.$control.width()}) //IE6- seems to require an explicit width on a DIV containing text
			mainobj.togglecontrol()
			$('a[href="' + mainobj.anchorkeyword +'"]').click(function(){
				mainobj.scrollup()
				return false
			})
			$(window).bind('scroll resize', function(e){
				mainobj.togglecontrol()
			})
		})
	}
}

Ahora, incluíremos la librería jQuery.js y el plugin scrolltotop.js en el header de nuestro documento:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="scrolltopcontrol.js"></script>

Para personalizar el plugin, como por ejemplo la imagen ha mostrar o la distancia a la esquina inferior izquierda, deberemos modificar estas líneas en scrolltotop.js:

setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]}, //Aquí especificamos: donde comenzará a verse el icono (en pixels), hasta donde subirá (en pixels), la duración del scroll, y la duración de la animación de mostrar y ocultar el icono
controlHTML: '<img style="width: 24px; height: 24px;" src="up.gif" alt="Aquí el texto alternativo" />', //Especificamos la imagen a mostrar, ancho y alto
controlattrs: {offsetx:15, offsety:15}, //Especificamos la distancia a la esquina inferior izquierda (en pixels)
anchorkeyword: '#top', //Si añadimos en el documento una imagen o enlace al top, aqui especificamos que ID o CLASS deberá tener para que realize la animación