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

Boton ir arriba con jquery avanzado

voy a compartir con vosotros un fragmento de script que me gusto mucho cuando lo probé se trata de un botón para ir arriba de la pagina, normalmente debe ser colocado por la parte baja de la pagina obvio.

aquí va el enlace:
<a href="" id='arriba'>Subir arriba</a>
y el script jquery
$(document).ready(function() {
$('#arriba').click(function(){ //Id del elemento cliqueable
$('html, body').animate({scrollTop:0}, 500);
return false;
});
});
Este post es antiguo, si quieres ver un botón mas avanzado https://datoweb.com/post/2297-boton-ir-al-top-de-la-pagina-con-jquery
5
Puntos
7419
Visitas
1
Resp
Por zeuskx hace 82 meses
Administrador Sitio web
Respuesta #1
buen aporte zeus vamos a dejar otro mas por si a alguien le interesa

JAVASCRIPT
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'></script>
<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>
CSS
<style type="text/css">
#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;
}
</style>
HTML
<table width="500" border="1" align="center">
  <tr>
    <td>Encabezado</td>
  </tr>
  <tr>
    <td height="1200">Cuerpo</td>
  </tr>
  <tr>
    <td>Pie</td>
  </tr>
</table>

<div id='IrArriba'>
<a href='#Arriba'><span/></a>
</div>
0
Puntos
Por alber hace 77 meses
Administrador
Compartir en facebook
Compartir en twitter
Compartir
Para comentar Inicia sesión o Registrate