Boton ir arriba con efecto deslizante con jQuery

Hola de nuevo, ahora en este turtorial, les voy a enseñar a agregar un boton para ir arriba en blog, con efecto deslizante y que aparece al bajar, y al estar arriba, desaparece, lo haremos con jQuery, css y utilizaremos la libreira de jQuery, asi que si ya la tienen no la agreguen , ya que podria causar que no funcionen otra cosas, bueno empezemos.

Boton ir arriba deslizante con Jquery

Para empezar, buscan si tienen la libreria de jQuery, para saber esto, buscan en su plantilla jQuer/1 si les aparece aunque sea una vez el script .js, no agreguen el que estará en este codigo, lo marcare en rojo, bueno lo primero que tienen que hacer es buscar lo siguiente:

</head>

Cuando lo encuentren, agregas estos codigos justo arriba de esa linea:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<style>
/* Botón Ir Arriba
----------------------------------------------- */
#IrArriba {
position: fixed;
bottom: 30px; /* Distancia desde abajo */
right: 30px; /* Distancia desde la derecha */
}
#IrArriba span {
width: 44px; /* Ancho del botón */
height: 44px; /* Alto del botón */
display: block;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi31W1Qbj6Wrn1gHmIwq8Oi8iK2VcyXFT0qvRNPLGFpDwkLPSDWZ7woleZSqoGtTM6-EFG3LUiQ3gj5-JKjweP7yNTHy_wyvojspl5K0Tk9CYgg_Vg1KBzERmKHTV-XT1dU-h8MF5dgkWXQ/s44/flecha_arriba.png) no-repeat center center;
}
</style> 

Y ya tienen el boton, ahora falta agregar el efecto deslizante y el de desaparecer, para hacer esto buscan:

</body> 

Y justo arriba de esa line agregan el siguiente codigo:

<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>  

Listo, ya esta todo funcionando, si quieren cambiar de posicion el boton, cambien bottom por top para ponerlo en la parte superior, y right por left si lo quieren a la izquierda, si quieren cambiar la imagen, cambien https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi31W1Qbj6Wrn1gHmIwq8Oi8iK2VcyXFT0qvRNPLGFpDwkLPSDWZ7woleZSqoGtTM6-EFG3LUiQ3gj5-JKjweP7yNTHy_wyvojspl5K0Tk9CYgg_Vg1KBzERmKHTV-XT1dU-h8MF5dgkWXQ/s44/flecha_arriba.png por el link de su imagen.