Botón para subir con jQuery que aparece y desaparce

En está ocasión me gustaría compartir un tip, para insertar un botón para subir la página del blog, hacia la parte de arriba (la parte superior de la cabecera) con un clic de ratón. Al bajar el scroll con tu mouse, aparece el botón, de la nada, por arte de magia, gracias al efecto deslizante de jQuery, y desaparece, cuando le das al botón, para ir hacia la parte superior. Puedes verlo en la siguiente demo:
Demo!


Añade el siguiente script antes de </head> en Edición HTML:

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'/>

Si tuvieras ya implantado jQuery omite el anterior paso
Ahora antes de ]]></b:skin>  agrega los estilos CSS:

/* Botón para Ir Arriba CSS de Aizum Blog
----------------------------------------------- */
#IrArriba {
position: fixed;
bottom: 30px; /* Distancia desde abajo */
right: 30px; /* Distancia desde la derecha */
}
#IrArriba span {
width: 100px; /* Ancho del botón */
height: 100px; /* Alto del botón */
display: block;
background: url(http://1.bp.blogspot.com/-grMW7kzMAKA/UnPojckMGQI/AAAAAAAAQV0/kGnQcOlMeBA/s1600/1downarrow_opt.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>

Instrucciones de configuración del artilugio:

1. En el código CSS puedes cambiar la imagen que viene por defecto. Deberás de añadir el ancho y el alto del botón, correspondiente a los valores de la imagen nueva insertada en el apartado asignado.
2. Puedes también cambiar la posición del icono de la flecha, igualmente en el código CSS. Ya sabes, right por left y bottom por top.
3. Recuerda que si ya tienes implantado jQuery no lo vuelvas añadir, si lo haces, te creara problemas de incompatibilidad. Recuerda este consejo.

Eso es todo, espero que os guste el botón para subir la página, para vuestra página web o blog, si tenéis alguna duda comentar, sois bienvenidos, responderé con la mayor brevedad posible. Sí deseáis, no os olvidéis de hacer clic en los banners de publicidad, es la única manera de agradecer y contribuir económicamente, para sostener está pagina web. Gracias por su colaboración. Enjoy this!

Get free premium widgets for your blog and website.