"Ir arriba" con efecto deslizante utilizando Scriptaculous

Con éste truco permitiremos a los visitantes que se encuentren en el footer o simplemente un poco más abajo de la cabecera ir hacia el comienzo del blog.

Puedes ver un ejemplo de "Ir arriba" en la parte derecha de éste blog.

1. Si aún no hemos aplicado Scriptaculous a nuestra plantilla, debemos agregar el siguiente código antes de </head>
(Y vuelvo a repetir ☺, si ya habeis aplicado Scriptaculous anteriormente no hace falta que lo volvais a poner)

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

ATENCIÓN: Paso para colocar la flechita de "ir arriba" al final de cada entrada

2. Ahora localizamos la siguiente línea:

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

(En algunas plantillas puede darse el caso de que no se encuentre esa línea.) Entonces, localiza el siguiente código:

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

3. Una vez localizada una de las dos líneas, colocamos debajo de ésta el siguiente código:

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

Tan solo cambiamos la URL  DE LA IMAGEN O DE LA FLECHA por la dirección donde tenemos nuestra imagen alojada que servirá para subir.


ATENCIÓN: Paso para colocar la flechita de "ir arriba" en la parte inferior derecha de la página


1. Una vez realizado el anterior paso [1] (aplicar Scriptaculous), vamos a Diseño> Edicion de HTML y añadimos el siguiente 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_IMAGEN_FLECHA' style='position:fixed; bottom:0; right:0;' title='Ir Arriba'/></a>

Y ahora, la misma historia que antes: cambiamos la URL DE LA IMAGEN O DE LA FLECHA.

Espero que os haya sido muy útil.
Saludos!!!!