Botones Arriba y Abajo con efecto deslizante

Muchos de los que tienen un blog, como nosotros, nos gusta los típicos botones de “ir hacia arriba” e “ir hacia abajo” y que tienen un efecto deslizante muy guapo.

Para aquellos que no sepan nada de programación (HTML y CSS) no os asustéis porque realmente, es muy sencillo conseguir este efecto y con botones de ir hacia arriba y hacia abajo, simplemente debemos usar jQuery, y un poco de css.





Para aplicar este efecto en nuestro blog, debemos estar en el panel de Blogger > Plantilla > Edición de HTML y colocamos el siguiente código antes de  ]]></b:skin>

/* Botones deslizantes “Ir arriba” y “ir abajo”
———————————————– */
.nav_up{
padding:7px; /* Distancia borde-icono */
background-color:white;
border:1px solid #CCC; /* Color del borde */
position:fixed;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhX8xaTbKiQahhCnrIFZiRd2qT4HvzGgZedEVr-MpmlxEf8hMUOod3IXAlpCez7HhrAJIacxloC3WwvOM5lWlpCD5rCcCbHiHk-NYvMEzILYPAx9jAxIz7NRpMbk0AFZHnKC0kH/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; /* Alineación (right=derecha y left=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/AVvXsEjOjRgWX0JsKImJC3q_RSljj9d3q5aqILbRgmxsc3nqyLTzYrT2jm6JNBPUBVCT4BTkbJP1OwX8PdTC4F5lvKEaIxAXQ_uftodRo4WgEFPhgraLiqrYpI5yDyG6GOAHswjsqLMP/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; /*Alineación (right=derecha y left=izquierda)  */
white-space:nowrap;
cursor: pointer;
border-radius: 3px 3px 3px 3px;
opacity:0.7;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);
}

A continuación debemos localizar el código </body> y colocar antes lo siguiente:

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

Al haber realizado estos pasos, ya habremos finalizado con todo el proceso para poder crear nuestros botones de “ir arriba” e “ir abajo” con efecto deslizante.
Si quieren, pueden editarlo, pero ojo! el código que se tiene que editar es el primero, ya que el segundo es el del script y ese no se puede tocar.
También podemos cambiar las imágenes de los botones, para ello debemos editar el primer código y sustituir las imágenes existentes por otras.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOjRgWX0JsKImJC3q_RSljj9d3q5aqILbRgmxsc3nqyLTzYrT2jm6JNBPUBVCT4BTkbJP1OwX8PdTC4F5lvKEaIxAXQ_uftodRo4WgEFPhgraLiqrYpI5yDyG6GOAHswjsqLMP/s16/arrow_down.png