Recomendado

Las mejores ofertas del Black Friday en Hormiguitas Ahorradoras

jueves, 26 de septiembre de 2013

boton "ir al top" que desaparece

Cuando tenemos una página muy grande y el visitante ha llegado hasta abajo, para que suba rapido y no tenga que estar dando al la rueda del raton podemos poner un boton que suba arriba de la página.



Os dejo este código que esconde el boton cuando estamos arriba de la página y cuando comenzamos a bajar se muestra visible. El código es el suguiente:



  1. onscroll=function(){
  2.    //creado por joason.com
  3.     var irtop=Math.max(document.documentElement.scrollTop,document.body.scrollTop);
  4.     if(irtop<200) {
  5.   document.getElementById('top').style.display='none';      
  6.  }else{
  7.         document.getElementById('top').style.display='block';
  8.   }
  9. }


Dentro del <body> pondemos uno de estos códigos:


          Este es para mostrar un enlace



  1. <div style="position:fixed;float: right;padding-right:20px;text-align:right;width:100%;right:0px;bottom:20px;z-index:10;display:none;" id="top">
  2. <a href="#top">subir</a></div>



         Este es para mostrar una imagen



  1. <div style="position:fixed;float: right;padding-right:20px;text-align:right;width:100%;right:0px;bottom:20px;z-index:10;display:none;" id="top">
  2. <a href="#top"><img src="URL_DE_LA_IMAGEN" width="50" height="50"></a></div>



        Este es para mostrar un boton



  1. <div style="position:fixed;float: right;padding-right:20px;text-align:right;width:100%;right:0px;bottom:20px;z-index:10;display:none;" id="top">
  2. <input value="subir" onclick="location.href = '#top'" type="button" /></div>



Como podeis ver, os dejo varias opciones, si quereis poner solo texto, poner una imagen, o poner un boton, que cada uno utilice la que mejor considere.




 Espero que os sea útil.




Un saludo..

7 comentarios:

  1. Hola, gracias por el codigo, pero tengo una duda, donde coloco el codigo de onscroll, soy nuevo en esto de la programacion, y trabajo con dreamweaver, muchas gracias....

    ResponderEliminar
    Respuestas
    1. Hola rodzowie, el código lo puedes poner en un archivo.js o dentro de tu html, lo puedes poner junto al código del boton o imagen que tengas para subir y de esa manera te acordaras para que es ese código.


      Un saludo...

      Eliminar
  2. hola, hola, muchas gracias hermano por responder tan rapido, te agradezco mucho,
    la verdad no me funciona, ya te coloco el codigo de la pagina:

    es este:
    www.adi.zic.com.co

    te coloco la web por que no me deja pegarte el codigo por aqui.
    y la verdad si vez la web, tuve que colocar el icono en la parte de abajo pero sin funcion de boton, y sobre el icono a un lado coloque invisible un rectangulo que si es boton que te lleva hacia arriba de la pagina, pero lo malo es que siempre esta al final,
    si me puedes colaborar, seria muy bueno, muchas gracias....

    ResponderEliminar
    Respuestas
    1. he mirado tu web, pero no veo el scrip puesto por ningun lado.


      Un saludo..

      Eliminar
  3. en efecto, por eso es mi pregunta.... donde lo debo de hubicar. en el codigo, pues el codigo primero: onscroll no me funciona , pero el de el body si funciona, y no da errores.

    ResponderEliminar
    Respuestas
    1. El código onscroll tiene que ir conjunto con la otra parte del código(bien sea boton, texto, imagen), una de las partes por si sola no funciona.
      El código funciona bien, mira el código de tu web, posiblemente ya estes usando esa función.

      Un saludo...

      Eliminar
  4. Gracias por el código aunque como complemento le faltaría como evitar que se muestre el #top en al barra de direcciones.

    ResponderEliminar