"Ir arriba" e "Ir abajo" con efecto deslizante (con Scriptaculous)


Como varios han sido los que han preguntado, hoy veremos cómo colocar las flechitas de "Ir arriba" e "Ir abajo" con efecto deslizante, usando en este caso las librerías de Google API : Prototype y Scriptaculous. En un post futuro haremos lo mismo pero con jQuery.

Pueden ver el efecto haciendo click en la flechita que aparece en la parte inferior derecha de mi blog.

Ahora empecemos:

1.§ Vamos a Diseño - Edición de HTML.

2.§ Con ayuda de CTRL+F buscamos </head> y antes de éste pegaremos el siguiente código:

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

Sí ya tenemos este código en nuestra plantilla no será necesario agregarlo de nuevo.

3.§ Ahora buscaremos </body> y antes de éste pegaremos:

<a href='#outer-wrapper' onclick='new Effect.ScrollTo("outer-wrapper",{offset:-140}); return false'><img alt='Ir arriba' border='0' src='http://img40.imageshack.us/img40/9397/arribar.png' style='position:fixed; bottom:0; right:0;'/></a>

<a href='#footer-wrapper' onclick='new Effect.ScrollTo("footer-wrapper",{offset:-140}); return false'><img alt='Ir abajo' border='0' src='http://img338.imageshack.us/img338/5733/abajov.png' style='position:fixed; bottom:40px; right:0;'/></a>

Si sólo queremos usar la flechita de Ir arriba,como en mi caso, sólo pegaremos la primera parte del código. Por cierto, si queremos usar nuestras propias flechitas, sólo deben de cambiar lo que está resaltado en negrita: la primera imagen es de "Ir arriba"; la segunda, de "Ir abajo".

4.§ Damos click a Guardar y eso sería todo. Como dije al inicio, en otra entrada veremos como colocar las flechitas, con efecto deslizante, pero usando jQuery para los que prefieren usarlo.

Aquí encontrarán otras flechitas buscando "arrow":

» Icon Finder
» IconLook

20 opinaron:

G

Excelente; había visto este efecto (en tu blog) pero no sabía como aplicarlo

Responder
Adrián Aratan

Vaya, veo que las librerías de Google sirven para distintas cosas y logran efectos hermosos

Responder
Genial

Uyyy me encanta el efecto; lo aplicaré en seguida

Responder
Graciela

Sabes tesoro que no recuerdo bien cómo lo he realizado, me parece con scrip.

Soy de olvidarme :((

Buena semana, nos vemos siempre :D

Responder
MAJA

lo aplique porque me encanta esto de la flecha pero hago click en la flecha y no sube no se que paso?

Responder
Jéssica YK

» G:
Espero que te sea de mucha ayuda.

» Adrián Aratan:
Tienes razón.

» Genial:
Seguro te gustará.

» Graciela:
Se ve muy bonito en tu blog.

S@lu2

Responder
Jéssica YK

» Maja:
No puedo ver el problema.¿quitaste el código? porque no veo las flechitas.
Sería bueno que pusieses el código, descargaras una copia de la plantilla y me la enviases al correo de contacto que está en la parte superior izquierda. Así yo podría subir la plantilla a un blog de pruebas y ver dónde está el problema.

Mientras no lo vea no puedo hacer nada :(

S@lu2

Responder
Kas-Tro

tengo un problema lo aplique en mi blog de pruebas pero me sube de golpe, de un solo tiro no hace el efecto deslizante mira mi blog aver si me puedes ayudar http://prueba2056.blogspot.com/

Responder
Jéssica YK

» Kas-Tro:
He visto tu blog y lo que falta es que agregues este código a la plantilla de tu blog, antes de </head>:

<script src='http://www.google.com/jsapi'/>
<script>
google.load("prototype","1.6.0.3");google.load("scriptaculous", "1.8.2");
</script>

Guardas cambios y listo. Si a pesar de eso no fnciona entonces mándame una copia de tu plantilla para ver dónde radica el problema.

S@lu2

Responder
Kas-Tro

gracias.. por tu ayuda pero de la noche a la ma;an esta funcionando.. como si nada..

Responder
Jéssica YK

» Kas-Tro:
Me alegra que todo se haya solucionado!

S@lu2

Responder
Meg4Mix

amigo estoy agregando este efecto pero no puedo, sale todo la flecha pero cuando le doy clik sale en la barra de direcciones http://miblog.blogspot.com/peru.html#outer-wrapper, x favor ayudame...

Responder
Jéssica YK

» Meg4Mix:
Vi tu blog, pero no vi que estuviesen las flechitas. Sería bueno que las agregaras de nuevo para que pueda ver qué es lo que está mal.

S@lu2

Responder
_RosarioZapien_

como puedo hacer que las flechas esten en el medio?

Responder
Jéssica YK

» _RosarioZapien:
Para que las flechas estén en medio, en lugar de colocar position:fixed; coloca position:middle;.

S@lu2

Responder
Abraham Santos

Hola, cómo estás, quisiera que me siguieras en Músicos Unidos Por favor :D

Gracias por esta entrada, es muy buena; pero no lo voy aplicar a mi página web, porque tengo otro tipo de flecha, y con este tipo de ir arriba se pone más lenta la computadora, pero en tu blog es rápido. Como quiera, Gr:)cias

Responder
Abraham Santos

Perdón, mi página web es: http://www.musicsunidos.com

Responder
Madness Electronics
Este comentario ha sido eliminado por el autor.
Responder
Judith Zamora
Este comentario ha sido eliminado por el autor.
Responder
Judith Zamora

Hola, cuando le doy a la flecha no sube, que pasa?
Gracias!! ^^
kameandcompany.blogspot.com

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio