Botón “Ir arriba” que desaparece con jQuery

Email this to someoneShare on FacebookShare on Google+Share on LinkedInTweet about this on Twitter

Ya hemos hablado de cómo colocar en nuestro blog un botón para “subir”, muy útil cuando la longuitud de la página requiere desplazar varias vueltar la rueda de nuestro ratón para volver a ver la cabecera, pero estéticamente no siempre queda bonito que se muestre permanentemente un botón de “Ir arriba“, en la parte infereior de nuestra web.

La solución lógica es hacer que ese botón se muestre sólo cuando es realmente necesario y tiene una utilidad, es decir, el momento en el que el usuario comienza a realizar scroll en nuestra página hacia abajo. Al realizar el efecto contrario también desaparece, ya que el usuario no está haciendo uso de el y por lo tanto, es un elemento en pantalla del que se puede prescindir.

UItoTop-scroll

UItoTop es un plugin bastante sencillo que nos servirá para hacer desaparecer el botón de “Subir” o “Ir arriba” y mostrarlo sólo cuando sea necesario.

Para comenzar a utilizar el plugin bassta con descargar los ficheros, realizar las llamadas en nuestro documento y añadir el siguiente código:

$(document).ready(function() {

	var defaults = {
		containerID: 'moccaUItoTop',
		containerHoverClass: 'moccaUIhover',
		scrollSpeed: 1150,
		easingType: 'linear'
	};

	$().UItoTop({ easingType: 'easeOutQuart' });
});

En el código se pueden configurar algúnanas opciónes como: el diseño CSS y la velocidad del scroll con la que sube nuestra página al pulsar sobre el botón, recordar que no es recomendable una velocidad demasiado baja, ya que el fin de este botón es ahorrar tiempo a los usuarios para llegar de nuevo a la cabecera del sitio.

2 comentarios

  1. Giancarlo dijo:
    30 Mayo, 2012
    Responder

    Hola ! que tla? estuve intentando utilizar este codigo pero no em sale nada, me baje la pagian completa como tmb los archivos de demo, pero aun nada, alguna ayuda sobre donde colocar este codigo, lo psue entre etiquetas de script, pero parece que no lso reconoce, ayuda porfavor, muchas gracias de antemano.

  2. Daniel dijo:
    9 Octubre, 2012
    Responder

    no funciona para el jqurery 1.6.2

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

De conformidad con lo establecido en la LOPD, Adpv Advertising Provider S.L. garantiza la adopción de las medidas necesarias para asegurar el tratamiento confidencial de los datos de carácter personal. Así mismo le informamos de la inclusión de sus datos en un fichero con la finalidad de mantener su relación negocial o contractual con Adpv Advertising Provider S.L. y de la posibilidad de ejercer los derechos de acceso, rectificación, cancelación y oposición en la siguiente dirección: Ercilla, 26, 1Dcha., 48011, Bilbao, Bizkaia. Privacidad.