[SOLUCIONADO] Fade in Fade out - Boton "ir arriba"

[fede5426]

Buenas!

Ando con un pequeño dilema. Como ya mencione anteriormente en el foro, no soy experto, solo soy un estudiante de diseño y programación web con ganas de aprender jaja.
Estoy haciendo un sitio para unos amigos, solo de práctica, y quería agregar a la pagina un botón para volver arriba, el típico botoncito que aparece al hacer scroll y te lleva al TOP cuando lo presionas.

Hasta ahora pude hacer que el botón este en la esquina inferior derecha y que me lleve al top, lo que no logro es hacer que el botón aparezca cuando hago scroll, agradecería una ayudita..

Código HTML:

<img src="img/arriba.png" class="ir_arriba" width="65px" height="65px" onclick="subir();return false" /> 

Css:

Código:

.ir_arriba{
   display:none;
   position:fixed;
   bottom:10px;
   right:10px;
   cursor:pointer;
}

js:

Código:

var arriba;
function subir() {
if (document.body.scrollTop != 0 || document.documentElement.scrollTop != 0) {
	window.scrollBy(0, -15);
	arriba = setTimeout('subir()', 0.3);
}
else clearTimeout(arriba);
}

Hasta ahora es todo lo que tengo, si alguien puede ayudarme con el fade in fade out desde ya le agradezco muchisimo.

Saludos!

[Alexis88]

Para ejecutar una instrucción o conjunto de instrucciones cuando el usuario se desplace con la barra, utiliza el evento scroll.

En este ejemplo, mostraré la imagen cuando el usuario se haya desplazado más de 200 píxeles y la ocultaré cuando la cantidad de píxeles desplazados sea menor o igual a 200:

Código Javascript:

window.addEventListener("scroll", function(){
    if (this.pageYOffset > 200){
        document.querySelector(".ir_arriba").style.display = "block";
    }
    else{
        document.querySelector(".ir_arriba").style.display = "none";
    }
}, false);
 

Saludos

[fede5426]

Buenisimo! Gracias Alexis88 funciona perfecto..

Solo una cosita mas, el boton aparece como muy de golpe. Yo quisiera que el efecto sea mas suave, que aparezca y desaparezca lentamente, no se si me explico :P

[Alexis88]

Si vas a usar esto en navegadores modernos (básicamente en versiones de Internet Explorer 10 en adelante, porque con Chrome, Firefox y Opera, no hay tanto inconveniente ya que se actualizan constantemente), puedes utilizar las propiedades opacity y transition:

En la hoja de estilos:

Código CSS:

.ir_arriba{
    transition: .25s;
}
 

En el archivo JS:

Código Javascript:

window.addEventListener("scroll", function(){
    var elemento = document.querySelector(".ir_arriba");
    if (this.pageYOffset > 200){
        elemento.style.opacity = 1;
    }
    else{
        elemento.style.opacity = 0;
    }
}, false);
 

Saludos

[fede5426]

Habia probado con opacity pero estaba escribiendo mal el codigo, muchisimas gracias Ale funciona perfecto.

Saludos!