Hacer un boton que me lleve arriba

20113784 · #1 (**permalink**) 28/08/2014, 09:20

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??

maxhurbano · #2 (**permalink**) 28/08/2014, 11:47

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!

emmx2012 · #3 (**permalink**) 29/08/2014, 13:10

muy bueno el código, te lo copio, permiso, gracias amigo

maxhurbano · #4 (**permalink**) 30/08/2014, 08:59

Cita:

Iniciado por emmx2012

muy bueno el código, te lo copio, permiso, gracias amigo

Por nada brother, adelante.

Saludos.