Añadir Botón Ir Arriba con Efecto Deslizante jQuery de una manera fácil

Anterior mente vimos como poner un botón ir arriba con estilo añadiendo CSS y jQuery, pues ahora veremos algo similar al anterior truco sólo que en este no añadiremos CSS, pero si un bonito efecto deslizante. El creador de este efecto es Mj12 y la primera vez que he visto un tutorial con este efecto a sido en DesconstructionCode, pero he modificado un poquitico el código HTML para poder agregarle una imagen ya que sólo tenía para ponerle texto.

Agregando este truco a tu blog, el "botón ir arriba" te aparecerá en el footer de la página, con alineación centrada oséa al medio de la página. Puedes verlo en mi blog de pruebas.

Para ponerlo en tu blog tienes que tener la librería jQuery v1.3.2.min, si no la tienes en tu blog copia el siguiente código y pégalo justo antes de </head>:

<script src='http://dl.dropbox.com/u/3373498/PazosBlogger/jQuery1.3.2.min.js' type='text/javascript'/>

Ahora añadimos el script, justo despues del código que acabamos de poner antes de </head>:

<script src='http://dl.dropbox.com/u/3373498/PazosBlogger/backtotop.js' type='text/javascript'/>

Por último agregamos el código HTML para activar la secuencia de comando "hacia arriba", para ello copia y pega el siguiente código justo antes de </body>:

<a href='#' onclick='MGJS.goTop();return false;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr1WPAsYBUX3uJZ8SkD2Eh1iMJ72enY8vJM6r8osi0N5zQcDD_CLpvu2sVKSWMntchyphenhyphen8YWooDgNQIkNvc55fBcHBHV8if8sqvWvv4Ac_HKyPop5U1AcH55OXDhv7rEGhIMnYgrAi0ZTBo/s320/arriba.png' title='Ir arriba'/></a>

Cambia lo que está en color rojo por la URL de tu botón.

Para los que quieren poner el botón ya sea al lado derecho o izquierdo, copien el siguiente código en vez del código anterior:

<a href='#' onclick='MGJS.goTop();return false;'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr1WPAsYBUX3uJZ8SkD2Eh1iMJ72enY8vJM6r8osi0N5zQcDD_CLpvu2sVKSWMntchyphenhyphen8YWooDgNQIkNvc55fBcHBHV8if8sqvWvv4Ac_HKyPop5U1AcH55OXDhv7rEGhIMnYgrAi0ZTBo/s320/arriba.png' style='position: fixed; bottom: 5px; right: 5px;' title='Ir arriba'/></a>

Para ponerlo al lado izquierdo cambien right por left, también pueden ajustar la posición del botón más arriba o más abajo cambiando el valor en bottom fíjense que está 5 pixeles, pueden ponerle el valor que se ajuste a sus necesidades.

Descargar Script