Pero ésta manera hace que demos un "salto" al pulsar una de las flechas, y no es del todo agradable, al menos no tanto como la sensación de deslizarse hasta el punto de la web al cual que queremos llegar (bien sea arriba o bien abajo).
Sin más preámbulos, vamos a los códigos:
Código Javascript :
<script src='http://www.google.com/jsapi'/> <script> google.load("prototype","1.6.0.3"); google.load("scriptaculous", "1.8.2"); </script>
Éste es el código javascript (que deberá ir en head). Llama al script que hará el efecto deslizante, por lo que no hay que tocar nada.
Código HTML :
<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'><img src='[b]URL de la imagen de la flecha hacia arriba[/b]' style='position:fixed; bottom:320; right:20;' title='Ir arriba'/></a>
<a href='#footer-wrapper' onclick='new Effect.ScrollTo("footer-wrapper",{offset:-140}); return false'><img src='[b]URL de la imagen de la flecha hacia abajo[/b]' style='position:fixed; bottom:270; right:20;' title='Ir abajo'/></a>Y éste es el código HTML+CSS, que deberá ir en body. En negrita están los lugares dónde deberán ir las imágenes de las flechas, por lo demás hay poco que cambiar, están en position:"fixed" para que se vean en nuestra pantalla siempre aunque demos scroll arriba o abajo.
He incluído los códigos de estilo (CSS) en style dentro del código HTML, para no tener que andar con clases para implementarlos. Podemos cambiar los valores de bottom, y right, para poner las flechas fijas en el lugar de la pantalla que queramos.
Espero que os sirva de ayuda, un saludo!
