Poner un botón "Ir arriba" con jQuery

Hoy vamos a hablar de como podemos poner un botón "Ir arriba" con jQuery que aparece y desaparece. 


Este botón se encuentra oculto y solo aparece cuando se baja la pagina, y desaparece cuando lo pinchamos y nos sube a la parte superior.

Funciona con jQuery,.
Puedas verlo funcionar en este mismo blog.

Insertarlo en el blog
Para ponerlo en tu blog en Entra en :
Tema > Editar HTML y busca </head> 
Justo antes pega este código 

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

Si ya lo tuvieras Omite este Paso. 

Ahora los antes de ]]></b:skin>de 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/AVvXsEgZwBkCFd7QtGRPOcQKDNzSVGalQWVCuEoJqWeTY8gTzBNumxjf2qA44w_7SZuM76uK4J7PpymVEc-09w3LWNM5NRc8EVj6ciKRI9lrJyHIUwxGL-ZAbnyxcD3rwam7VpATqb3yw54yjPI/s60/flecha-arriba.png) no-repeat center center;
}

Por Ultimo, los antes de </body>de 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
Notas:
Puedes cambiar las url de la imágenes por las que tu quieras. El icono de la Flecha del estará Lado derecho inferior, he aquí si quisieras a la Izquierda cambia 
derecha: 30px; por la izquierda: 30px; 
Y si lo quisieras inferior arriba cambia: 30px; por la parte superior: 30px; 

Recuerda, si que ya tienes jQuery No Debes Poner El Primer código , de lo contrario tendrás Problemas de incompatibilidad.