"Volver arriba" con efecto deslizante usando Scriptaculous

Se trata de colocar una flechita o icono que nos posibilite el volver a la parte superior del blog.
Ya vimos antes como colocar el "volver arriba" en cada entrada y lo que conseguiremos ahora, es esto mismo pero con un efecto deslizante muy elegante.
Podéis comprobar como funciona una vez aplicado, si pincháis en cualquiera de las flechitas que veis a la derecha en el post-footer (pie de entradas) de mi blog.

"Volver arriba" desde el pie de cada entrada (post-footer).

[1] Si no tenemos Scriptaculous aplicado en la plantilla, lo haremos ahora colocando el código necesario antes de </head> (acordaros que si ya lo estamos usando en algún efecto, no es necesario volver a incluirlo):

<!-- Prototype y Scriptaculous-->
<script src='http://www.google.com/jsapi'/>
<script>
google.load(&quot;prototype&quot;,&quot;1.6.0.3&quot;);
google.load(&quot;scriptaculous&quot;, &quot;1.8.2&quot;);
</script>
<!-- Prototype y Scriptaculous-->

[2] Expandimos las plantillas de artilugios y localizamos más o menos esta línea (es donde yo lo he colocado en mi blog):

<p class='post-footer-line post-footer-line-1'>

En algunas plantillas podría mostrarse de esta manera:

<div class='post-footer-line post-footer-line-1'>

[3] Debajo de esa línea colocamos el código para la flechita:

<!--Flecha ir arriba -->
<a href='#outer-wrapper' onclick='new Effect.ScrollTo(&quot;outer-wrapper&quot;,{offset:-140}); return false'><img align='right' alt='Volver arriba' src='URL_DEL_ICONO_FLECHA' title='Volver arriba'/></a>

"Volver Arriba" desde la parte inferior derecha de la página

[1] Usaremos el mismo sistema que para incluir la flecha o el icono al pie de cada entrada, es decir, incluimos el código del paso [1] si no lo tenemos incluido de usos anteriores.

[2] Desde Edición HTML bajamos casi hasta el final del código de la plantilla y pegamos este código antes de </body>:

<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'><img alt='Ir Arriba' border='0' src='URL_DE_LA_FLECHA_ICONO' style='position:fixed; bottom:0; right:0;' title='Ir Arriba'/></a>