viernes, 10 de octubre de 2014

Botón "Ir Arriba" que aparece y desaparece

  Seguramente habrán visto ese botoncito en los blogs, generalmente en la esquina inferior derecha, que al presionarlo permite ir al comienzo de la página.
  En la mayoría de las veces, ese botón está siempre visible.
  Buscando y buscand logré encontrar la manera en que dicho botón sólo esté presente cuando se le necesita y con un efecto deslizante al ir ascendiendo. Como lo que ocurre en este mismo blog.

  Para ello vamos a necesitar meter mano en el código HTML de nuestro blog:
ir a  Plantilla > Editar HTML

El código a ingresar es el siguiente:

1. Antes de </head> agregar el siguiente código sólo si ya no lo tienes:

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


2. Antes de ]]></b:skin> agregar:

/* ----------  Botón Ir Arriba --------- */
#IrArriba {
position: fixed;
bottom: 30px; /* Distancia desde abajo */
right: 30px; /* Distancia desde la derecha */
}

#IrArriba span {
width: 60px; /* Ancho del botón */
height: 60px; /* Alto del botón */
display: block;
background: url(http://lh5.googleusercontent.com/-luDGEoQ_WZE/T1Ak-gta5MI/AAAAAAAACPI/ojfEGiaNmGw/s60/flecha-arriba.png) no-repeat center center;
}


3. Antes de </body> agregar:

<div id='IrArriba'>
<a href='#Arriba'><span/></a>
</div>
<script type='text/javascript'>
//<![CDATA[
// Botón para Ir Arriba
jQuery.noConflict();
jQuery(document).ready(function() {
jQuery("#IrArriba").hide();
jQuery(function () {
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 200) {
jQuery('#IrArriba').fadeIn();
} else {
jQuery('#IrArriba').fadeOut();
}
});
jQuery('#IrArriba a').click(function () {
jQuery('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});

});
//]]>
</script>





1 comentario:

  1. Hola:Todo mefunciona a la perfeción, en paginas donde no tenga un código lightbox. Si implememto este código en una página dónde las imágenes se abren por lightbox, este lightbox deja de funcionar y el código del botón funciona. ¿Cómo soluciono esto?

    El lightbox es este:

    !-- Arquivos utilizados pelo jQuery lightBox plugin --
    script type="text/javascript" src="js/jquery.js"/script
    script type="text/javascript" src="js/jquery.lightbox-0.5.js">/script
    link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /
    !-- / fim dos arquivos utilizados pelo jQuery lightBox plugin --


    script type="text/javascript"
    var j = jQuery.noConflict();
    jQuery(function() {
    jQuery('#gallery a').lightBox();
    });
    /script


    Graciaas;

    ResponderEliminar