Foros del Web » Programando para Internet » Jquery »

Hacer un boton que me lleve arriba

Estas en el tema de Hacer un boton que me lleve arriba en el foro de Jquery en Foros del Web. Hola a todos. Me gustaria hacer un boton que solo aparezca cuando haya desendido de la primera seccion de mi pagina y me lleve nuevamente ...
  #1 (permalink)  
Antiguo 28/08/2014, 10:20
 
Fecha de Ingreso: agosto-2014
Mensajes: 48
Antigüedad: 5 años, 4 meses
Puntos: 1
Hacer un boton que me lleve arriba

Hola a todos.

Me gustaria hacer un boton que solo aparezca cuando haya desendido de la primera seccion de mi pagina y me lleve nuevamente arriba como el de TUMBLR... pero que no lo lleve arriba de golpe, que tenga una trancision... como hago todo esto??
  #2 (permalink)  
Antiguo 28/08/2014, 12:47
Avatar de maxhurbano  
Fecha de Ingreso: mayo-2009
Mensajes: 7
Antigüedad: 10 años, 6 meses
Puntos: 1
Respuesta: Hacer un boton que me lleve arriba

Hola!

Casualmente, en mi web tengo algo como lo que pides, a ver si encuentro todo el código...

Coloca ésto debajo de <body>
Código HTML:
<a href="#cielo" class="topLink" id="scroll-up" style="display: none; z-index: 100; "></a> 
Esto en tu archivo JS
Código:
$(window).scroll(function(){
                if (window.pageYOffset >= 1200) {
                        $('#scroll-up:not(:visible)').fadeIn();
                } else {
                        $('#scroll-up:visible').fadeOut();
                }
        });

		
$(document).ready(function() {

	$("a.topLink").click(function() {
		$("html, body").animate({
			scrollTop: $($(this).attr("href")).offset().top + "px"
		}, {
			duration: 500,
			easing: "swing"
		});
		return false;
	});

});
Y ésto en tu CSS:
Código HTML:
#scroll-up {
position: fixed;
display: none;
top: 10px;
right: 10px;
width: 40px;
height: 40px;
background: transparent url(RUTA-DE-IMAGEN) top left no-repeat;
opacity: 0.5;
}

#scroll-up:hover {
opacity: 0.7;
}
Donde dice "RUTA-DE-IMAGEN, coloca la ruta de la imagen que quieras que aparezca.
Puedes ajustar a qué altura aparecerá, modificando el 1200 por más o menos, en el JS.
Coloca el id="cielo" al <body>.
Así: <body id="cielo">

Demo: http://taringra.net/protocolo/





Saludos!

Última edición por maxhurbano; 28/08/2014 a las 15:45 Razón: CSS code
  #3 (permalink)  
Antiguo 29/08/2014, 14:10
 
Fecha de Ingreso: agosto-2014
Mensajes: 35
Antigüedad: 5 años, 3 meses
Puntos: 0
Respuesta: Hacer un boton que me lleve arriba

muy bueno el código, te lo copio, permiso, gracias amigo
  #4 (permalink)  
Antiguo 30/08/2014, 09:59
Avatar de maxhurbano  
Fecha de Ingreso: mayo-2009
Mensajes: 7
Antigüedad: 10 años, 6 meses
Puntos: 1
Respuesta: Hacer un boton que me lleve arriba

Cita:
Iniciado por emmx2012 Ver Mensaje
muy bueno el código, te lo copio, permiso, gracias amigo
Por nada brother, adelante.


Saludos.

Etiquetas: arriba, boton
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:28.