Blogger: Botón "Ir Arriba" que aparece y desaparece

  Seguramente habrán visto ese botoncito en los blogs, generalmente en la esquina inferior derecha, que al presionarlo permite ir al comienzo de la página.
  En la mayoría de las veces, ese botón está siempre visible.
  Buscando y buscand logré encontrar la manera en que dicho botón sólo esté presente cuando se le necesita y con un efecto deslizante al ir ascendiendo. Como lo que ocurre en este mismo blog.

  Para ello vamos a necesitar meter mano en el código HTML de nuestro blog:
ir a  Plantilla > Editar HTML

El código a ingresar es el siguiente:

1. Antes de </head> agregar el siguiente código sólo si ya no lo tienes:

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

2. Antes de ]]></b:skin> agregar:

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

3. Antes de </body> agregar:

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

---