Ir arriba con jquery en la parte de abajo de la pagina
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
2458
Visitas
Visitas
0
Resp
Resp
Por prozona hace 110 meses
Experto