CÓDIGO PARA PONER BOTONES ARRIBA Y ABAJO

Con el código que encontráis en este post podréis poner dos botones (flechas) para subir o bajar rápidamente en un blog. Además siempre están visibles .

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: 
.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/AVvXsEi2nmURRljANmzZPUqlN20gSedHBJcn_OLijQoDPTINISmetIgBUxmTvZWRO2PYC0f6hnqH5lDlfBAVbs0QnVAM5dnYF0jlCKe_FxEVNy1p_1cIdBE5eL9Lr5kDj5yXTh-LAJWkvI90Y-w/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 */
right:30px; /* Cambiar right por left si se quiere a la izquierda*/
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/AVvXsEjb6b8sJfHl3UxwepgOk0ikot8gs5Hm9031vo3IyfUgz3Uu91QSGLa31aMraD-vSNZ9SeWJotJXmePA-59_QieHHX9_D9jSxym-InVTqoNQYGADzbrM3JOiv9yaQ2GBnuNYMVUY4taY0TM/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;
rigth:70px; /* Cambiar right por left si se quiere a la izquierda */
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 con esto estaría. En el primer código puedes ver en color rojo algunos estilos que puedes modificar. Las flechas son imágenes, así que puedes cambiarlas por otras cambiando las URLs de las mismas .

Seguir a @nachosegovia13