Botón "Ir arriba" - con JQuery

Consiste en un botón flotante que sólo es visible cuando se baja la página y permite a los lectores volver al top de tu blog con sólo presionarlo.
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>

Recuerda que 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/AVvXsEj27XHX39uWjBXP-4dEnmmyuMG_szZr3wPwlKrSjA7rJ5lHqSs9dw65h5HZpqExsrrkOZkhUdIUkzHWe4rHdvxQpTloMh1PPMqvM7UGMTd-9_GuT9PxDIXogf6FDe-UhbChW4pgswARoW0/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>

Guardar 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;

Visto en | Ciudad Blogger