Configuración:
.
Biología
.
Botánica
.
Tecnología
.
Sociedad
A mis trece años de edad, el día 2 de Diciembre de 2007 inicié ‘El Balcón de Jame’. Este humilde espacio, cuyo secreto siempre fue el de compartir sin recibir nada a cambio, me dio la oportunidad de conocer un mundo nuevo, un entorno en el que me sentía yo mismo.

Hoy, 17 de abril de 2011 finalizo esta etapa de mi vida con una gran sonrisa y junto al recuerdo que este blog y cada unos de vosotros me habéis concedido.

He sido bloggero.

Jaime Trujillo Escobedo.

Volver arriba con efecto deslizante usando JQuery

Volver arriba con efecto deslizante utilizando JQueryGracias 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

Diseño>Edición de HTML>expandimos artilugios




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.


Referencias: Neoease

el kid dice...

Genial!!!! me ha gustado el truco bastante, ya lo tengo en el blog.

Gracias!

Jaime Trujillo Escobedo dice...

el kid, me alegra mucho que te guste el efecto. Gracias por comentar ;).

Marianoaxl dice...

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.

Laube dice...

Estupendo efecto, Jaime. Además, hacía tiempo que me interesaba mucho buscar un gadget d eéstos.
Un besote y gracias.

Jaime Trujillo Escobedo dice...

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

Jaime Trujillo Escobedo dice...

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!

Jose dice...

Buenísimo el efecto.
¿Se podría hacer que la flechita fuera para abajo y ponerla arriba a la derecha?
Gracias.

Jose dice...

Hola, ¿se podría hacer que la flecha fuera para abajo con efecto deslizante y estuviera arriba a la derecha?
Gracias

cristian_cena dice...

Gracias por postear este efecto! un detalle muy bonito para nuestros sitios. ;)

Jaime Trujillo Escobedo dice...

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!

Jaime Trujillo Escobedo dice...

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) :).

Jose dice...

He hecho lo que me decías, pero solamente me lleva hacia abajo sin deslizarse. :(

Jaime Trujillo Escobedo dice...

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 ;).

Anónimo dice...

Jaime, y si lo queremos usar en PHP ??
como se haria ??
Muchas gracias ...

Jaime Trujillo Escobedo dice...

Desconozco la forma de conseguir lo que me pides, Anónimo. Espero aprender cuanto antes.

teofermi dice...

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

Jaime Trujillo Escobedo dice...

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.

EL SÁHARA DE LOS OLVIDADOS dice...

Muchas gracias Jaime por tu ayuda
un beso

Jaime Trujillo Escobedo dice...

Gracias a ti, EL SÁHARA DE LOS OLVIDADOS. ¡Saludos!

Anónimo dice...

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 ;)

Escribe tu comentario en la entrada...

El Balcón de Jaime fue terminado el 17 de abril de 2011. Leer despedida.

Me gustaría conocer tu opinión. El comentario será moderado y en breve se publicará.

Si deseas incluir un enlace utiliza este código:

<a href="Dirección de tu página">Titulo del enlace</a>

Para publicar un código haz uso del Conversor de entidades.

Intenta escribir sobre algo relacionado con el artículo. Si no lo haces, podría tardar en responderte.

¿Problemas al comentar? Utiliza el formulario antiguo