Botón "Ir Arriba" con jQuery para Blogger

Hola amigos de Trucasos Blogger 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 tienes jQuery omite este paso.

Ahora buscamos la etiqueta ]]></b:skin> y justo antes de ella agregamos el siguiente código:

 /* 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/AVvXsEihuTNCXzE0rTxLPxAE_N1pbIp_hR1FDFrh-EEnbRutPpla1XD76si0ALocQ7pITuT6SZlyaKsKVrydizHkLOeY2LhoXdNXdPEBTKhE1jMzNWjGVVGdulbhBPMtkWYkGfKXEbOVdowy5kk/s60/flecha-arriba.png) no-repeat center center;
}

Por ultimo, vamos a la etiqueta </body> y pegamos este 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 agregues de nuevo el primer código, espero que les sirva nos vemos en el próximo tutorial. ¿Dudas? deja un comentario Saludos