Botones con JQuery de Ir Arriba e Ir Abajo

Cómo poner los botones de Ir Arriba e Ir Abajo con un efecto de deslizamiento usando jQuery.

Lo primero que hacemos es entrar a nuestra Edición HTML y pegar antes de ]]></b:skin> los estilos: 

/* Botones de Ir arriba e Ir abajo con jQuery

----------------------------------------------- */

.nav_up{

padding:7px; /* Distancia entre el borde y el ícono */

background-color:white;

border:1px solid #CCC; /* Color del borde */

position:fixed;

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhDgZW92V4JvWMnNQOTp9YP-jpYoyZZHLvyiEHxEJAZzXFw0IjwG1GKJrOkZyAHNDfi5-E-hOS4gyb71rgMHsFm0JkhZkPRPlWv5aAewLCfFD42pgdij_jsIb_KgyaqCgZ2va8zovYBptw/s16/arrow_up.png) no-repeat top left;

background-position:50% 50%;

width:20px; /* Ancho del botón */
height:20px; /* Alto del botón */
bottom:10px; /* Distancia desde abajo */
left:30px; /* Cambiar left por right si se quiere a la derecha */

white-space:nowrap;

cursor: pointer;

border-radius: 3px 3px 3px 3px;

opacity:0.7;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);

}

.nav_down{

padding:7px; /* Distancia entre el borde y el ícono */

background-color:white;

border:1px solid #CCC; /* Color del borde */

position:fixed;

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMIcg0e1jENFeqFn_K2Zy186p9Q3iWkj_787_YSm6FSy7xEyWeIb3QpsHKxkT4IgjoKO-FjDIB0ZSM8VltqlC73aitIW3l7d0Z4BRc7441_AQxb0gJef0LeMksXwsXCEm5qztGUSWBr6E/s16/arrow_down.png) no-repeat top left;

background-position:50% 50%;

width:20px; /* Ancho del botón */
height:20px; /* Alto del botón */

bottom:10px;

left:70px; /* Cambiar left por right si se quiere a la derecha */

white-space:nowrap;

cursor: pointer;

border-radius: 3px 3px 3px 3px;

opacity:0.7;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);

}

Luego antes de </body> pega este código:

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

<div class='nav_up' id='nav_up' style='display:none;'/>

<div class='nav_down' id='nav_down' style='display:none;'/>

<script>

//<![CDATA[

(function(){var special=jQuery.event.special,uid1='D'+(+new Date()),uid2='D'+(+new Date()+1);special.scrollstart={setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}else{evt.type='scrollstart';jQuery.event.handle.apply(_self,_args)}timer=setTimeout(function(){timer=null},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid1,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid1))}};special.scrollstop={latency:300,setup:function(){var timer,handler=function(evt){var _self=this,_args=arguments;if(timer){clearTimeout(timer)}timer=setTimeout(function(){timer=null;evt.type='scrollstop';jQuery.event.handle.apply(_self,_args)},special.scrollstop.latency)};jQuery(this).bind('scroll',handler).data(uid2,handler)},teardown:function(){jQuery(this).unbind('scroll',jQuery(this).data(uid2))}}})();

$(function() {

var $elem = $('body');

$('#nav_up').fadeIn('slow');

$('#nav_down').fadeIn('slow');

$(window).bind('scrollstart', function(){

$('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});

});

$(window).bind('scrollstop', function(){

$('#nav_up,#nav_down').stop().animate({'opacity':'1'});

});

$('#nav_down').click(

function (e) {

$('html, body').animate({scrollTop: $elem.height()}, 800);

} );

$('#nav_up').click(

function (e) {

$('html, body').animate({scrollTop: '0px'}, 800);

} );});

//]]>

</script>

En el primer código los que tienen color rojo los puedes modificar. Las flechas son imágenes, así que puedes cambiarlas tambien por otras cambiando las Urls de las mismas que se encuentran también en el primer código. Si quieres cambiarlas del lado derecho ahí mismo verás los valores que debes modificar.

En el segundo código he puesto en color azul el script de jQuery, sólo para distinguirlo, por si ya lo tuvieras no lo agregues de nuevo.