"Ir arriba" con efecto deslizante utilizando Scriptaculous

viernes, 4 de septiembre de 2009
Con éste truco permitiremos a los visitantes que se encuentren en el footer o simplemente un poco más abajo de la cabecera ir hacia el comienzo del blog.


Puedes ver un ejemplo de "Ir arriba" en la parte derecha de éste blog.

1. Si aún no hemos aplicado Scriptaculous a nuestra plantilla, debemos agregar el siguiente código antes de </head>
(Y vuelvo a repetir , si ya habeis aplicado Scriptaculous anteriormente no hace falta que lo volvais a poner)

<!-- 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-->
ATENCIÓN: Paso para colocar la flechita de "ir arriba" al final de cada entrada

2. Ahora localizamos la siguiente línea:
<p class='post-footer-line post-footer-line-1'>
(En algunas plantillas puede darse el caso de que no se encuentre esa línea.) Entonces, localiza el siguiente código:

<div class='post-footer-line post-footer-line-1'>
3. Una vez localizada una de las dos líneas, colocamos debajo de ésta el siguiente código:

<!--Flecha ir arriba -->
<a href='#outer-wrapper' onclick='new Effect.ScrollTo(&quot;outer-wrapper&quot;,{offset:-140}); return false'><img align='right' alt='Ir arriba' src='URL_DE_LA_IMAGEN_FLECHA' title='Ir arriba'/></a>
Tan solo cambiamos la URL  DE LA IMAGEN O DE LA FLECHA por la dirección donde tenemos nuestra imagen alojada que servirá para subir.


ATENCIÓN: Paso para colocar la flechita de "ir arriba" en la parte inferior derecha de la página


1. Una vez realizado el anterior paso [1] (aplicar Scriptaculous), vamos a Diseño> Edicion de HTML y añadimos el siguiente código antes de </body> :

<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_FLECHA' style='position:fixed; bottom:0; right:0;' title='Ir Arriba'/></a>


Y ahora, la misma historia que antes: cambiamos la URL DE LA IMAGEN O DE LA FLECHA.

Espero que os haya sido muy útil.
Saludos!!!!

10 comentarios:

  • Julio Cesar Slinas Da Silva

    muy bien me costo pero me salio gracias por el codigo

  • La Trucoteca

    ¡Bienvenido Julio!
    Nos alegra que te haya gustado y servido el truco. Ya verás como poco a poco te irá costando menos hacer estas cositas =)
    ¡Muchos saludos!

  • C3C1

    A mi también me sirvió de mucha ayuda, aunque me costó pero Juanmatm me explicó y lo solucioné :)

  • La Trucoteca

    Hola C3C1
    Qué bien que te haya salido bien, la verdad es que la flechita te ha quedado perfecta :)
    Seguro que Juanma te ha podido guiar en tu propósito muy bien :)
    Un abrazo!

  • YaGrEoR

    disculpa, tengo un problema con las funciones de google. no me sale el efecto al hacer click en la flecha que puse en mi blog y google chrome me dice algo como: Uncaught TypeError: Cannot call method 'cumulativeOffset' of null.
    de nuevo disculpa la molestia ¿puedes ayudarme?

  • La Trucoteca

    Yagreor, ¿has seguido el tutorial paso a paso?, porque nos parece que has debido de poner el codigo en un sitio equivocado, y debe añadirse antes de </head>.
    Intenta probar eso y nos comentas :)
    Saludos!

  • Angel Pineda

    Hice todo en mi blog de blogger, pero no da, sale el botón, incluso sale que me llevará a la dirección de mi blog con #outerwrapper al final, pero doy clic y simplemente no sube.

  • aldyboy18

    hola a todos!! alguien sabra como poner ese codigo en una pagina jimdo!!
    aldo.vm@hotmail.com

  • A mi no me sale ninguna de las dos frases que hay que buscar en el paso 2 :(

  • Buenas amigo he hecho todo como lo indicas pero solo logre q me apareciera la flecha pero cuando le doy un click no me hace nada, si me puedes ayudar te lo agradecería ya que soy nuevo en esto gracias de antemano

  • Ir Arriba