Cómo instalar un botón "Ir arriba" que aparece y desaparece

Artículo publicado en el blog Ciudad Blogger, uno de los sitios con más información sobre tecnología Blogger Ve la entrada en su blog original.

Botón !IrArriba" con jQuery que aparece y desaparece

1 de marzo de 2012 | Publicado por El Potro |

Hace ya bastante tiempo vimos cómo poner las flechas de "Ir Arriba" e "Ir Abajo", ahí vimos tanto el método simple, como con un efecto deslizante usando Scriptaculous.

En esta ocasión veremos cómo poner el botón de "Ir Arriba" en el blog pero con la particularidad de que se encuentra oculto, sólo aparece cuando se baja la página y desaparece otra vez cuando se regresa a la parte superior del blog. Además, al funcionar con jQuery el desplazamiento de la página se vuelve con un efecto deslizante. Puedes verlo funcionar en este blog de pruebas, al bajar el scrollbar aparecerá el ícono para subir, una vez que subas al hacer click desaparecerá de nuevo.

Para ponerlo en tu blog entra en la Edición HTML y antes de </head> agrega jQuery:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>

Si ya lo tuvieras omite ese paso.
Ahora antes de ]]></b:skin> agrega los estilos:

/* Botón Ir Arriba
----------------------------------------------- */
#IrArriba {
position: fixed;
bottom: 30px; /* Distancia desde abajo */
right: 30px; /* Distancia desde la derecha */
}

#IrArriba span {
width: 60px; /* Ancho del botón */
height: 60px; /* Alto del botón */
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2lgVn5r7aUzAdiUcwYpD3X7x72SZ_8dGaHUks8UydeN4yI1BN6GshhvRzIBRKTBx1qWQblj4c3jsbvMD4m9lDZVK6XhbGa-yCgUgkKBD9D7TrwGxoXcYVf80Y6s31_A8dkOTLb0uav3U/s60/flecha-arriba.png) no-repeat center center;
}

Por último, antes de </body> agrega el script:

<div id='IrArriba'>
< a href='#Arriba'><span/></a>
< /div>
< script type='text/javascript'>
//<![CDATA[
// Botón para Ir Arriba
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#IrArriba").hide();
jQuery(function () {
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 200) {
jQuery('#IrArriba').fadeIn();
} else {
jQuery('#IrArriba').fadeOut();
}
});
jQuery('#IrArriba a').click(function () {
jQuery('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});

});
//]]>
< /script>

Guarda los cambios y listo.

En color verde puedes ver dónde se modifica la distancia y el tamaño del botón. En caso de que quieras poner otra imagen distinta, cambia la URL en color azul por la de tu imagen; si haces eso deberás cambiar el ancho y alto del botón donde se indica de acuerdo a las medidas de tu imagen.

El ícono de la flecha estará del lado inferior derecho, si lo quisieras a la izquierda cambia
right: 30px; por left: 30px;

Y si lo quisieras arriba cambia bottom: 30px; por top: 30px;

Recuerda, que si ya tienes jQuery no debes poner el primer código, de lo contrario tendrás problemas de incompatibilidad.

Si te interesa otro método para tener el botón de Ir arriba, Ir abajo, e Ir al centro también con jQuery, puedes usar el método de Vku.