Bot?n "Ir Arriba" con jQuery que aparece y desaparece

Hace ya bastante tiempo vimos c?mo poner las flechas de "Ir Arriba" e "Ir Abajo", ah? vimos tanto el m�todo simple, como con un efecto deslizante usando Scriptaculous.

En esta ocasi?n veremos c?mo poner el bot?n de "Ir Arriba" en el blog pero con la particularidad de que se encuentra oculto, s?lo aparece cuando se baja la p?gina y desaparece otra vez cuando se regresa a la parte superior del blog. Adem?s, al funcionar con jQuery el desplazamiento de la p?gina se vuelve con un efecto deslizante. Puedes verlo funcionar en este blog de pruebas, al bajar el scrollbar aparecer? el ?cono para subir, una vez que subas al hacer click desaparecer? de nuevo.

Para ponerlo en tu blog entra en la Edici?n HTML y antes de </head> agrega jQuery:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

Si ya lo tuvieras omite ese paso.
Ahora antes de ]]></b:skin> agrega los estilos:

/* Bot?n Ir Arriba
----------------------------------------------- */
#IrArriba {
position: fixed;
bottom: 30px; /* Distancia desde abajo */
right: 30px; /* Distancia desde la derecha */
}

#IrArriba span {
width: 60px; /* Ancho del bot?n */
height: 60px; /* Alto del bot?n */
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqguscYXywWHgAcSSSOmPLh-_aZw5MaPRAMnz2fsVUP0Qx-zllsGzthjxF6O22vAKIaZTCSalgreW2QNtwsdStlRUCUe3ArtUZi6kfIak1p0vz-xwXHI_yktrRXZwm5PImSSt8DqHo9pA/s60/flecha-arriba.png) no-repeat center center;
}

Por ?ltimo, antes de </body> agrega el script:

<div id='IrArriba'>
<a href='#Arriba'><span/></a>
</div>
<script type='text/javascript'>
//<![CDATA[
// Bot?n para Ir Arriba
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#IrArriba").hide();
jQuery(function () {
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 200) {
jQuery('#IrArriba').fadeIn();
} else {
jQuery('#IrArriba').fadeOut();
}
});
jQuery('#IrArriba a').click(function () {
jQuery('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});

});
//]]>
</script>

Guarda los cambios y listo.

En color verde puedes ver d?nde se modifica la distancia y el tama?o del bot?n. En caso de que quieras poner otra imagen distinta, cambia la URL en color azul por la de tu imagen; si haces eso deber?s cambiar el ancho y alto del bot?n donde se indica de acuerdo a las medidas de tu imagen.

El ?cono de la flecha estar? del lado inferior derecho, si lo quisieras a la izquierda cambia
right: 30px; por left: 30px;

Y si lo quisieras arriba cambia bottom: 30px; por top: 30px;

Recuerda, que si ya tienes jQuery no debes poner el primer c?digo, de lo contrario tendr?s problemas de incompatibilidad.

Si te interesa otro m�todo para tener el bot?n de Ir arriba, Ir abajo, e Ir al centro tambi�n con jQuery, puedes usar el m�todo de Vku.