2/12/12

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.



Ir arriba y abajo con jQuery

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(http://lh6.googleusercontent.com/-7zE5N9GdDUk/T6rH17KE6II/AAAAAAAACeQ/aEcKRyEhxsE/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(http://lh6.googleusercontent.com/-sukwuViZaYY/T6rH15A8niI/AAAAAAAACeM/YErd0S8lPGA/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.
http://lh6.googleusercontent.com/-sukwuViZaYY/T6rH15A8niI/AAAAAAAACeM/YErd0S8lPGA/s16/arrow_down.png

1 comentario:

  1. Muy interesante y útil pero con lo torpe que soy seguro que término estropeando algo, asi que mejor lo dejaremos como está,jaja. Te seguimos. Brujitamorada de Mi sala de lectura

    ResponderEliminar

Puedes decirnos lo que quieras. Se admiten quejas (que seran atendidas o desoidas dependiendo de nuestro humor :P), suplicas (nunca atendidas) y peticiones de amor (jamás serán atendidas jaja)