25 mar 2014

In , by // // Leave a Comment

Botón "Ir Arriba" que aparece y desaparece


Les voy a mostrar como insertar un botón de Ir arriba en nuestro blog que aparece al bajar la página y desaparece al regresar a la parte superior además, al funcionar con jQuery el desplazamiento de la página se vuelve con un efecto deslizante.

Para ponerlo en tu blog entra en la Edición HTML y antes de </head> agrega jQuery:



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


Ahora antes de ]]></b:skin> agrega los estilos: 

 

/* 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijhc_q6MKZU-30zsieljdlfuQVaRnrivegO7y7VzyuoYpWHVXTaZA_lhy4zonj0fMknbu1__27cjXlG5jmWw_B-TbtgpTCjvGkOEz4GgVvktaBBbNdZ-BC2kbC7uoywX3QFt9Ye9bPtcQ/s1600/arrowtop.png) no-repeat center center;
}


Por último, antes de </body> agrega el script:


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


Guarda los cambios y listo.
En caso de que quieras poner otra imagen distinta, cambia la URL en color azul por la de tu imagen.

El ícono de la flecha estará del lado inferior derecho, si lo quisieras a la izquierda cambia
right: 30px; por left: 30px;
Y si lo quisieras arriba cambia bottom: 30px; por top: 30px;


Recuerda, que si ya tienes jQuery no debes poner el primer código, de lo contrario tendrás problemas de incompatibilidad.




0 comentarios:

Publicar un comentario

© 2016 Entornomedia