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:
- onscroll=function(){
- //creado por joason.com
- var irtop=Math.max(document.documentElement.scrollTop,document.body.scrollTop);
- if(irtop<200) {
- document.getElementById('top').style.display='none';
- }else{
- document.getElementById('top').style.display='block';
- }
- }
Dentro del <body> pondemos uno de estos códigos:
Este es para mostrar un enlace
- <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">
- <a href="#top">subir</a></div>
Este es para mostrar una imagen
- <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">
- <a href="#top"><img src="URL_DE_LA_IMAGEN" width="50" height="50"></a></div>
Este es para mostrar un boton
- <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">
- <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..
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....
ResponderEliminarHola 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.
EliminarUn saludo...
hola, hola, muchas gracias hermano por responder tan rapido, te agradezco mucho,
ResponderEliminarla 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....
he mirado tu web, pero no veo el scrip puesto por ningun lado.
EliminarUn saludo..
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.
ResponderEliminarEl 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.
EliminarEl código funciona bien, mira el código de tu web, posiblemente ya estes usando esa función.
Un saludo...
Gracias por el código aunque como complemento le faltaría como evitar que se muestre el #top en al barra de direcciones.
ResponderEliminar