Ir arriba e ir abajo con flechas y javascript

Este espacio como tantos otros tiene colocadas unas flechas para desplazarse arriba y abajo con efecto deslizante usando la librería Scriptaculous.

1. Se coloca JavaScript una sola vez; si ya está no es necesario colocarlo otra vez.

2. Colocamos antes de la etiqueta </head>

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

3. Diseño>Edición de HTML>expandimos artilugios. Usamos control+F y buscamos casi al final de la plantilla </body>

4. Antes o encima de </body> colocamos el código para que nos permita la colocación de las imágenes, más el efecto subir y bajar:

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

- Se sustituye URL_DE_LA_IMAGEN_FLECHITA por la imagen deseada.

5. Guardar.

Nota:
- Se puede variar el espacio entre una flecha y otra modificando la cifra de bottom

- Se puede sustituir bottom por top si queremos que una flecha o imagen esté arriba del todo usando top: 0;

- Si las imágenes de subir y bajar quieres que estén en la izquierda se modifica right por left

- Se puede variar el parámetro right hasta encontrar lo que uno busque o el famoso margin-top o margin-bottom

Ideas al poder...

► Te puede interesar:
- Ir arriba e ir abajo con flechas y javascript
- http://www.blogdelujo.com/2011/10/ir-arriba-e-ir-abajo-con-flechas-y.html
- Ir arriba con una flecha en el pie de la entrada (post-footer)