Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

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
2458
Visitas
0
Resp
Por prozona hace 110 meses
Experto
Compartir en facebook
Compartir en twitter
Compartir
Para comentar Inicia sesión o Registrate