Gracias a JQuery podemos crear una enorme cantidad de elegantes efectos para el blog. Uno de los trucos para blogger más conocidos es el de "volver arriba con una imagen o enlace", el cual permite a los visitantes volver al inicio del blog con un solo clic.
¿Pero y si realizamos el truco con JQuery? El efecto cambia. Al hacer clic en el botón de "subir" éste nos conduce al inicio del sitio web con un efecto deslizante muy curioso.
Ver el truco en funcionamiento
Busca la etiqueta </head> y encima añade estos scripts:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://sites.google.com/site/scriptsbalcon/b/blsubirjquery.txt' type='text/javascript'/>
La primera línea se el script de JQuery.min.js y no es necesario que lo vuelvas a insertar si ya lo hiciste en algún otro truco.
Ahora busca la etiqueta </body> y encima pega este código:
<a title="Volver arriba" onclick="MGJS.subir();return false;" href="#"><img style="position: fixed; bottom: 10px; left: 10px;" src="URL DE TU IMAGEN"></a>
Reemplaza URL DE TU IMAGEN por la dirección de tu icono a mostrar y listo [+].
Guarda la plantilla para terminar:
Hacer que la flechita nos lleve hasta el final del blog
Si lo que estabas buscando es la manera de instalar un icono en la esquina superior derecha de tu blog y que su función sea la de, con este mismo efecto, deslizarnos hasta el final del blog, lee los comentarios número 8 y 10 en los que Jose me pregunta justamente esto.
Nota:
- Puedes encontrar iconos de flechas muy variados en esta página.
- El segundo código a añadir también puede introducirse en un gadget html-javascript.
- El segundo código a añadir también puede introducirse en un gadget html-javascript.
Referencias: Neoease
¿Problemas al comentar? Utiliza 
Genial!!!! me ha gustado el truco bastante, ya lo tengo en el blog.
Gracias!
el kid, me alegra mucho que te guste el efecto. Gracias por comentar ;).
Muchas Gracias Jaime!! Siempre brindando grandes aportes y siempre bien explicados como para que lo entienda hasta gente como yo, jaja. Un Saludo desde Argentina y Muchas Gracias.
Estupendo efecto, Jaime. Además, hacía tiempo que me interesaba mucho buscar un gadget d eéstos.
Un besote y gracias.
¡Marianoaxl! Que bueno tenerte por aquí ;).
Es un encanto ofreceros todo esto. Desde que necesites cualquier cosilla estaré a tu disposición.
¡Abrazos desde España!
Laube, buen efecto y sinceramente bastante útil. Es cómodo poder volver al inicio de un blog con un solo clic (yo también lo instalé en El Balcón).
¡Abrazos, amiga!
Buenísimo el efecto.
¿Se podría hacer que la flechita fuera para abajo y ponerla arriba a la derecha?
Gracias.
Hola, ¿se podría hacer que la flecha fuera para abajo con efecto deslizante y estuviera arriba a la derecha?
Gracias
Gracias por postear este efecto! un detalle muy bonito para nuestros sitios. ;)
Jose, para hacer que la flecha vaya hacia abajo y posicionada en la esquina superior derecha, utiliza este otro código:
<a href='#footer-wrapper' onclick='MGJS.subir();return false;' title='Volver arriba con efecto deslizante usando JQuery'><img src='URL DE LA IMAGEN' style='position: fixed; top: 10px; right: 10px;'/></a>
Tan solo tendrás que reemplazar URL DE LA IMAGEN por la dirección de tu icono como explico en la entrada y guardar la plantilla. ¡Suerte!
Es un placer poder compartirlo, cristian_cena. Reconozco que el efecto es estupéndo (lo tuve durante bastante tiempo instalado y funciona a la perfección) :).
He hecho lo que me decías, pero solamente me lleva hacia abajo sin deslizarse. :(
Jose, por ahora la única forma que encontré de hacerlo no incluye un efecto deslizante, es decir, puedes conseguir una flechita que "baje" utilizando este código:
<a title="Ir para abajo con efecto deslizante" href="#HTML19"><img style="position: fixed; top: 30px; right: 10px;" src="http://cdn.iconfinder.net/data/icons/VistaICO_Toolbar-Icons/128/Arrow-Down.png"></a>
Por otra parte, tengo una entrada preparada acerca del efecto deslizante con unas pocas propiedades en javascript, sin necesidad de usar JQuery u otro script externo ;).
Jaime, y si lo queremos usar en PHP ??
como se haria ??
Muchas gracias ...
Desconozco la forma de conseguir lo que me pides, Anónimo. Espero aprender cuanto antes.
Hola Jaime, mira yo tengo la flechita de subir abajo a la derecha y ¿si quiero poner la de bajar al lado o encima de la que tengo..como tendria que hacerlo, donde tendria que poner el script?
Muchas gracias
Teofermi, tan solo deberías incluir este código en un elemento html-javascript:
<a href="#footer-1"><img style="position:fixed;bottom:20;right:6px;" src="URL DE LA IMAGEN"/></a>
Reemplaza URL DE LA IMAGEN con la dirección de tu flechita y listo.
Muchas gracias Jaime por tu ayuda
un beso
Gracias a ti, EL SÁHARA DE LOS OLVIDADOS. ¡Saludos!
Eres lo máximo, había intentado con otros códigos similares y ninguno funcionaba en mi página, hasta que encontré el tuyo.... GRACIAS MIL ;)