Ir arriba con efecto deslizante (con jQuery).


En una entrada anterior habíamos visto como añadir este efecto, pero con las librerías Prototype y Scriptaculous.
Hoy haremos este mismo efecto, pero usando jQuery ( pueden ver el script funcionando en mi blog de pruebas)

Los pasos son muy sencillos:

1.§ Vamos a Plantilla - Edición de HTML; si usamos a antigua interfaz de Blogger, 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:

<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/jessicaykca/home-1/top_jessica.js' type='text/javascript'/>

» Si ya tenemos la librería jQuery en nuestra plantilla, no será necesario agregar la primera parte del código.
» Como pueden ver, el segundo arhivo ya está alojado; sin embargo, si quieren alojarlo en su propio servidor pueden Descargar el archivo.

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

<a href='#' onclick='MGJS.subir();return false;' title='Ir arriba'><img src='http://img40.imageshack.us/img40/9397/arribar.png' style='position: fixed; bottom: 0px; right: 0px;'/></a>

Podemos reemplazar la imagen por otra; para ello, sólo cambiaremos lo que está en negrita. O simplemente podemos reemplazarlo por un texto (Top, arriba, volver,...).
Si queremos que la flechita esté en la izquierda, reemplazamos right por left

4.§ Damos click a Guardar y eso sería todo.

Ver video en YouTube.

9 opinaron:

G

Pues está muy bueno; lo voy a agregar!

Responder
Adrián Aratan

Gracias; ahora lo agrego

Responder
squirrel

Se ve que es muy sencillo; parecía difícil, pero ya veo que no es así

Responder
Graciela

Jéssi! tanto tiempo, te leo pero no dejo comentarios :S

Espero te encuentres bien, lo mejor para vos, besitos :)

Responder
Nicolas

Muchisimas gracias me sirvio mucho

Responder
Titaniii

Me ha ido fenomenal!!!! Por fin, y gracias a ti lo he conseguido!!!
Un beso!!!

Responder
Solcito Escribe

Hola, yo busco con CTRL+F y me aparece que no se ah encontrado ninguna coincidencia :( si sabes por que o me decis que puedo verificar si esta bien,muchas gracias! :P muchisimas gracias, ah yo tambien tengo otra duda, ¿sera porque yo ya puse algo detras? ahora sip jaja adios! muchas gracias por su atencion.;)

Responder
Solcito Escribe

Jaja ya pude perdon por molestar tantoo! jaja :S

Responder
Solcito Escribe

Perooo... ¿me podes decir por mal el URL de la flechita que tenes? y a cambio te doy una pagina (post)donde hay unos cursores muy buenos (al menos para mi) jaja bueno acordamos?

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