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:
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
Respuesta #1
buen aporte zeus vamos a dejar otro mas por si a alguien le interesa
JAVASCRIPT
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
Puntos
Por alber hace 123 meses
Administrador