Esta muy de moda hacer efectos con jquery en nuestras web para dar un aspecto mas dinámico y divertido a nuestros sitios ademas de darle un toque mas moderno y actualizado.
En esta ocasión veremos una gran función para brindarle al visitante una comodidad a la hora de navegar por la pagina,se trata de colocar un ir arriba con jquery en la parte de abajo de la web.
Aquí podemos ver una demo:demo
Lo primero que tenemos que hacer es cargar la librería javascript de jquery desde google lo podemos hacer desde la web oficial o agregando el siguiente código entre el <head> y </head> de nuestra pagina:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
Despues agregamos el plugin que nos hace el efecto persiana y hace que la flecha se oculte en la parte de arriba de la pagina:
<script type="text/javascript">
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>
Ahora cargamos los estilos css de la flecha de ir arriba:
<style type="text/css">
#IrArriba {
position: fixed;
bottom: 30px;
right: 30px;
}
#IrArriba a {
width: 60px;
height: 60px;
display: block;
background: url(http://lh5.googleusercontent.com/-luDGEoQ_WZE/T1Ak-gta5MI/AAAAAAAACPI/ojfEGiaNmGw/s60/flecha-arriba.png) no-repeat center center;
opacity:0.6;
}
#IrArriba a:hover {
width: 60px;
height: 60px;
display: block;
opacity:0.8;
-webkit-transition-duration: 0.3s;
background: url(http://lh5.googleusercontent.com/-luDGEoQ_WZE/T1Ak-gta5MI/AAAAAAAACPI/ojfEGiaNmGw/s60/flecha-arriba.png) no-repeat center center;
}
</style>
Por ultimo antes del cierre del body (</body>) colocamos la div que se encargara de mostrarnos el plugin:
<div id='IrArriba'> <a href=''></a> </div>
0
Puntos
Puntos
2436
Visitas
Visitas
0
Resp
Resp
Por prozona hace 10 años
Master