Ir arriba e ir abajo con Efecto Scriptaculous con texto

El Ir arriba y el ir abajo ya lo hemos visto en muchas ocasiones, en muchos sitios web y creo que aquí también. Pero hay un problema: Este efecto siempre es utilizado con una imagen.

Déjenme explicarles a qué me refiero: Si tenemos un blog, ese blog pesa mucho ya que tiene muchas imágenes, las cuales relentizan el blog. Si usamos Scriptaculous, lo relentizamos más ya que es una librería un poco mas pesada.

Ahora, para quizá ahorrarnos unos segundos de tiempo de espera en una página web en la que usamos scriptaculous podemos usar texto.

Viendo en Ciudad Blogger, encontré este tutorial y me pregunté si podría hacerse con texto en lugar de imágenes, y lo conseguí y lo comparto con ustedes.

El tutorial:

Primeramente agregamos lo siguiente antes de </head>:

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

Luego, para poderlo aplicar, dice que apliquemos lo siguiente antes de </body>:

<a href='#outer-wrapper' onclick='new Effect.ScrollTo(&quot;outer-wrapper&quot;,{offset:-140}); return false'><img border='0' src='URL de la imagen' style='position:fixed; top:0; right:0;' title='Ir arriba'/></a>

<a href='#footer-wrapper' onclick='new Effect.ScrollTo(&quot;footer-wrapper&quot;,{offset:-140}); return false'><img border='0' src='URL de la imagen' style='position:fixed; bottom:0; right:0;' title='Ir abajo'/></a>

Y ya, ya lo tenemos, pero con imagen. Ahora vamos a hacer lo mismo, pero sin usar ninguna imagen, agregamos esto:

<a href='#header-wrapper' onclick='new Effect.ScrollTo(&quot; outer-wrapper &quot;,{offset:-140}); return false' style='position:fixed; top:0px; right:0; font-size:50px;' title='Ir arriba'>&#9650;</a>

<a href='#footer-wrapper' onclick='new Effect.ScrollTo(&quot; footer-wrapper &quot;,{offset:-140}); return false' style='position:fixed; bottom:0px; right:0; font-size:50px;' title='Ir abajo'>&#9660;</a>

Lo que dice: "&#9650;  y &#9660; ", son caracteres unicode, aquí, en vagabundia habla más, los cuales los podemos sustituir por cualquiera de estos, por el que nos plazca.

Si se fijan, en lo que está marcado en negrita, en el segundo (por donde dice url de la imagen), lo que hicimos fue cambiar todo lo que contiene la etiqueta img y reemplazarlo por texto.

Pueden ver un ejemplo de este efecto en ésta página.

Eso es todo, si tienen alguna pregunta o duda hagan su comentario.