"Ir arriba" e "Ir abajo" con efecto deslizante

Ya vimos en una entrada anterior como usar una flecha que nos permite ascender a la parte superior del blog usando Scriptaculous y además con un efecto deslizante añadido muy lindo.

En esta entrada veremos como añadir dos imágenes o flechitas juntas, una que nos permite ascender (Ir arriba) y otra que nos posibilita el descenso (Ir abajo).
Usaremos, al igual que en la anterior entrada, la librería Scriptaculous para darle el efecto deslizante.

[1] Desde Edición HTML de nuestro panel de Blogger localizamos la etiqueta </head> en el código de nuestra plantilla y justo sobre ella pegamos esto:

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

Este código solo lo añadimos si no estamos usando Prototype y Scriptaculous, si lo estamos usando para cualquier otro efecto no es necesario añadirlo de nuevo

[2] Prácticamente al final del código de nuestra plantilla localizamos la etiqueta </body> y sobre ella colocamos el código para las imágenes o flechitas de "ir arriba" e "ir abajo":

<!--Flecha ir abajo -->
<a href='#footer-wrapper' onclick='new Effect.ScrollTo("footer-wrapper",{offset:-140}); return false'><img alt='Ir abajo' border='0' src='URL_DE_LA_IMAGEN_FLECHITA' style='position:fixed; bottom:40px; right:0;margin-bottom: 5px;'/></a>

<!--Flecha ir arriba -->
<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_FLECHITA' style='position:fixed; bottom:0; right:0;margin-top: 5px;'/></a>

[3] Cambiamos donde dice URL_DE_LA_IMAGEN_FLECHITA por la url de nuestras imágenes o iconos-flecha.

[4] Guardamos cambios.

El resultado sería algo parecido a esta imagen en la esquina inferior derecha de la pantalla en nuestro blog:

En Iconspedia podéis encontrar una fantástica colección de flechas muy apropiadas para usar con este efecto.