Botones de Ir Arriba e Ir abajo con jQuery

Hace poco vimos c?mo poner un bot?n de Ir arriba con jQuery, pues esto es parecido, pero no igual. Esto es porque los botones siempre est?n visibles a diferencia del otro, y s?lo se desvanecen ligeramente cuando movemos el scroll de la p?gina, pero adem?s, tambi�n incluye la funci?n de ir hasta abajo del blog.

Puedes ver un ejemplo en este blog de pruebas, los botones se encuentran en la parte inferior izquierda.

Veamos entonces c?mo poner los botones de Ir Arriba e Ir Abajo con un efecto de deslizamiento usando jQuery.

Lo primero es entrar en la 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/AVvXsEidn2orw3LMkWUVCJT9QLQMcA7cPHmcUgJbmMy3D7VrXK5FAL9iYsxNsxrRoeGkxNqsAUmceMpk18tru4YoyMUK6-uZV3IBOat3kT7COzKWISVXBG9cWmbBveIDAOwRdyhl0YSfHSgQhc4/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/AVvXsEhSGgvr3OyAb8uo4fZVJWchrkHicDJyXRqmQsqWMMGiUEYtepYty3qoyVMovSktv08cGZ-7INxm0_yO1P965YQrvg6kOMU1cUBLGr94-fdLrrFzASmkjczxm17yuHyxi0CB3CKgt6gzMN0/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>

Y listo, as? se sencillo. En el primer c?digo puedes ver en color verde algunos estilos que puedes modificar. Las flechas son im?genes, as? que puedes cambiarlas 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 qu� valores debes modificar.

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

Si usas Scriptaculous podr?as aplicar el "parche", pero si no te quieres complicar la vida usa estos botones con Scriptaculous.

V?a | Codrops