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.