210

"Volver arriba" con efecto deslizante usando Scriptaculous

Flecha Ir arriba
Se trata de colocar una flechita o icono que nos posibilite el volver a la parte superior del blog.
Ya vimos antes como colocar el "volver arriba" en cada entrada y lo que conseguiremos ahora, es esto mismo pero con un efecto deslizante muy elegante.
Podéis comprobar como funciona una vez aplicado, si pincháis en cualquiera de las flechitas que veis a la derecha en el post-footer (pie de entradas) de mi blog.

"Volver arriba" desde el pie de cada entrada (post-footer).

[1] Si no tenemos Scriptaculous aplicado en la plantilla, lo haremos ahora colocando el código necesario antes de </head> (acordaros que si ya lo estamos usando en algún efecto, no es necesario volver a incluirlo):
<!-- 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-->

[2] Expandimos las plantillas de artilugios y localizamos más o menos esta línea (es donde yo lo he colocado en mi blog):
<p class='post-footer-line post-footer-line-1'>

En algunas plantillas podría mostrarse de esta manera:
<div class='post-footer-line post-footer-line-1'>

[3] Debajo de esa línea colocamos el código para la flechita:
<!--Flecha ir arriba -->
<a href='#outer-wrapper' onclick='new Effect.ScrollTo(&quot;outer-wrapper&quot;,{offset:-140}); return false'><img align='right' alt='Volver arriba' src='URL_DEL_ICONO_FLECHA' title='Volver arriba'/></a>

"Volver Arriba" desde la parte inferior derecha de la página

[1] Usaremos el mismo sistema que para incluir la flecha o el icono al pie de cada entrada, es decir, incluimos el código del paso [1] si no lo tenemos incluido de usos anteriores.

[2] Desde Edición HTML bajamos casi hasta el final del código de la plantilla y pegamos este 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_FLECHA_ICONO' style='position:fixed; bottom:0; right:0;' title='Ir Arriba'/></a>

Entradas Relacionadas:

210 comentarios:

«El más antiguo   ‹Más antiguo   Total comentarios: 201 – 210 de 210   Más reciente›   El más reciente»
Unknown

y como lo hago en una web normal?

Anónimo

ALBERTO Ni idea... yo hablo de Blogger, aunque algunas cosas básicas sirvan para otros sitios, incluidas web normales...

I-kun ^^

Hola Rosa! Perdona que te moleste...
Ya he leido todos los comentarios y gracias a eso pude solucionar el problema de "outer-wraper" pues le puse el código correcto según mi plantilla de blog... todo funciona bien: aparece la flecha que yo le he puesto y se desliza.
El único problema es que no puedo lograr que la flecha aparesca en la misma posición que en tu página!... aparece centrado en el pie de página! que puedo hacer? por favor ayudame, lo agradecería mucho.

www.lepondretunombre.blogspot.com

Unknown

Nada hija ya no se lo que hacer, no me funciona y llevo 2 horas, desisto.
gacias

Anónimo

I-kun ^^ Veo que está conseguido! ;)

Anónimo

SinecuanumSigue todos los pasos, y en el último, colocalo así:
<a href='#header-inner' onclick='new Effect.ScrollTo("header-inner",{offset:-140}); return false'><img alt='Ir Arriba' border='0' src='URL_DE_LA_FLECHA_ICONO' style='position:fixed; bottom:0; right:0;' title='Ir Arriba'/></a>

I-kun ^^

no Rosa :( no lo he logrado...
no logro hacer que la flecha quede en la esquina inferior derecha, como en tu blog...

He hecho todo según indicas... y nada :/
Ayudame por favor :)

www.lepondretunombre.blogspot.com

Anónimo

I-kun ^^ No se como ni desde donde miras tu blog, yo lo hago eFirefox e IExplorer ambos en sus ultimas versiones y la niña con la boca abierta de ir arriba, está a la derecha de la pantalla tal como está mi flecha...

Pablo Omar Palmeiro

Rosa, gracias!!!!
Yo tenia el problema de la plantilla nueva de blogger y encontre la solucion en otro lado, pero te sigo siendo fiel a vos, asi que te paso el enlace para que leas y agregues esa info aca:
si usas una plantilla nueva del Diseñador de plantillas de Blogger entonces tendrás que buscar esta línea:

div class='body-fauxcolumns'

Y cambiarla por esta otra:

div id='outer-wrapper' class='body-fauxcolumns'



--
Luego buscar esta línea:

div class='content-cap-bottom cap-bottom'

Y cambiarla por esta:

div id='footer-wrapper' class='content-cap-bottom cap-bottom'


Con eso funcionará también en esas plantillas.

Anónimo

TaitaPop Pues si, esa es una posible solución, aunque más sencillo es cambiar en el código de la flecha los parámetros que se añaden por los de la plantilla nueva.

«El más antiguo   ‹Más antiguo   Total comentarios: 201 – 210 de 210   Más reciente›   El más reciente»

Publicar un comentario

Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).

Los comentarios están siendo moderados.

:) :(( :( :P :D :$ ;) :I :X :O |O :S