"Ir arriba" e "Ir abajo" con efecto deslizante (con Scriptaculous)

Como varios han sido los que han preguntado, hoy veremos cómo colocar las flechitas de "Ir arriba" e "Ir abajo" con efecto deslizante, usando en este caso las librerías de Google API : Prototype y Scriptaculous. En un post futuro haremos lo mismo pero con jQuery.

Pueden ver el efecto haciendo click en la flechita que aparece en la parte inferior derecha de mi blog.

Ahora empecemos:

1.§ Vamos a Diseño - Edición de HTML.

2.§ Con ayuda de CTRL+F buscamos </head> y antes de éste pegaremos el siguiente código:

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

Sí ya tenemos este código en nuestra plantilla no será necesario agregarlo de nuevo.

3.§ Ahora buscaremos </body> y antes de éste pegaremos:

<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'><img alt='Ir arriba' border='0' src='http://img40.imageshack.us/img40/9397/arribar.png' style='position:fixed; bottom:0; right:0;'/></a>

<a href='#footer-wrapper' onclick='new Effect.ScrollTo("footer-wrapper",{offset:-140}); return false'><img alt='Ir abajo' border='0' src='http://img338.imageshack.us/img338/5733/abajov.png' style='position:fixed; bottom:40px; right:0;'/></a>

Si sólo queremos usar la flechita de Ir arriba,como en mi caso, sólo pegaremos la primera parte del código. Por cierto, si queremos usar nuestras propias flechitas, sólo deben de cambiar lo que está resaltado en negrita: la primera imagen es de "Ir arriba"; la segunda, de "Ir abajo".

4.§ Damos click a Guardar y eso sería todo. Como dije al inicio, en otra entrada veremos como colocar las flechitas, con efecto deslizante, pero usando jQuery para los que prefieren usarlo.

Aquí encontrarán otras flechitas buscando "arrow":

» Icon Finder
» IconLook