Botón "ir arriba" que aparece y desaparece

Al igual que en poner botón “ir arriba” e “ir abajo” este script nos sirve para subir hacia arriba de la página cuando estemos abajo, la única particularidad es que el botón, ícono o imagen que pongas solo aparecerá cuando bajemos el scroll, y desaparecerá una vez que hagas click en él y subas a la cabecera del blog.

Puedes verlo funcionando aquí.  

Para poner este truco entra en Plantilla, Editar html, y antes de </head> pegas la librería Jquery:

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

Ten en cuenta que si anteriormente ya has puesto en tu blog JQuery, no tendrás que ponerlo otra vez. Solo asegúrate que sea la última versión.

Ahora nuevamente buscamos en la plantilla ]]></b:skin> y justo antes ponemos los estilos que definirán el botón o la imagen que pondrás:

/* Botón Ir Arriba
----------------------------------------------- */
#IrArriba {
position: fixed;
bottom: 30px;
left: 30px;
}

#IrArriba span {
width: 50px;
height: 30px;
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5wArdvlEMAWiYzQS3rwehGfdsrBgJdd_G9sxUQESAhclJGU9SASVZFDh3-FC6rMMwWdD6d8NHhl6IHCdWmcB8e7rq24rEn6dAEDO-vDYm7HSmzAdCdFXYCcsmx7jZuVDtTmwyJStIFFM/w50-h30-no/Sin+t%25C3%25ADtulo.png) no-repeat center center;
}

Ahora solo falta poner el script que hará que este artilugio eche a andar. Para ello buscamos </body> y antes de ahí pegamos 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>

Solo cambia https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5wArdvlEMAWiYzQS3rwehGfdsrBgJdd_G9sxUQESAhclJGU9SASVZFDh3-FC6rMMwWdD6d8NHhl6IHCdWmcB8e7rq24rEn6dAEDO-vDYm7HSmzAdCdFXYCcsmx7jZuVDtTmwyJStIFFM/w50-h30-no/Sin+t%25C3%25ADtulo.png por la Url de tu imagen. Procura que el tamaño de la imagen no exceda de 50x30px para que no distorsione en tu blog. Ahora, si quieres que el botón (o lo que hayas puesto) vaya al lado derecho cambia left: 30px por right: 30px. Y eso es todo.