Boton ir arriba progresivamente (Smooth Scroller) en blogger

Seguro que habeis visto en algunos blogs el típico botón de ir arriba o ir al principio, sobre todo cuando las entradas son muy largas, como es el caso de este blog. A veces cuando pinchamos en ese botón navegamos hasta el principio de la pagina con un efecto progresivo y con aceleración, o mejor dicho deceleración. Este efecto se llama Smooth Scroller y es muy sencillo de conseguir, simplemente tenemos que utilizar un fichero javascript que podeis descargar de aquí. El fichero contiene un ejemplo que nos permitirá entender como funciona.

Una vez descargado, el fichero que necesitamos es el llamado "smooth.pack.js" y necesitamos subirlo a un servidor, como blogger no nos permite subir ficheros javascript podemos subirlo a google sites o a PMSC. Para mas información visita subir ficheros a blogger utilizando google sites.

Una vez el fichero esta en el servidor, simplemente debemos crear el botón mediante el código siguiente

<a href='#top' title='Ir Arriba' style='position: fixed; bottom: 10px; left: 2%;'> <img alt='Ir Arriba' src='rutadetuimagen' /></a>

Dónde en "rutadetuimagen" pondremos la ruta que aparece en el campo src, al subir la imagen deseada, desde una entrada, por ejemplo.
posibles imagenes para tu botón: aquí

Este código podemos ponerlo donde interese, en cualquier sitio dentro del body o también introducirlo dentro de un gadget HTLM JavaScript de blogger, yo personalmente, lo hice mediante el gadget.

una vez creado el botón, creamos el anclaje. Para ello ponemos este codigo justo despues de la etiqueta <body>.

<a name='#top'></a>

Ahora incrustamos el enlace de la libreria javascript que producirá el efecto smooth scroll. El código va en el head, por ejemplo, antes de la etiqueta </head> ponemos lo siguiente:

<script type='text/javascript' src='smooth.pack.js'></script>

donde smooth.pack.js será la dirección completa del fichero en el servidor.
Para más información sobre como obtener la dirección del fichero pincha aquí.

Finalmente nuestro botón está listo, podemos personalizarlo a nuestro gusto, cambiarlo de lugar, cambiar la imagen del botón o simplemente poner un enlace de texto.

Apunteweb

5 nov 2009