Show "Volver arriba" elemento de enlace con jQuery cuando se desplaza hacia abajo

Question

quiero imitar el comportamiento con jQuery como se puede ver aquí: http://edo.webmaster.am/

Basta con mirar a la esquina inferior derecha, desplácese hacia abajo un poco y Verá el botón "volver arriba".

Por lo tanto, es invisible hasta que se desplaza hacia abajo en una página y luego aparece (animado).

¿Cómo puedo hacer eso en jQuery?

Answer 1

Puede controlar la posición de desplazamiento de la ventana actual y actuar en consecuencia. Si desea que el desplazamiento sea después de cierto punto (el código siguiente hará cualquier desplazamiento, incluso 1px), simplemente verifique $(this).scrollTop() > n en la declaración if, donde n es el desplazamiento deseado.

http://jsfiddle.net/robert/fjXSq/

$(window).scroll(function() { 
    if ($(this).scrollTop()) { 
     $('#toTop:hidden').stop(true, true).fadeIn(); 
    } else { 
     $('#toTop').stop(true, true).fadeOut(); 
    } 
}); 

Answer 2

vieja pregunta, pero pensé que como he implementado una para mí para dar mi granito de arena. Creo que es mejor usar un setTimeout para proteger contra múltiples eventos disparados. De esta manera:

function showButton() { 


    var button = $('#my-button'), //button that scrolls user to top 
     view = $(window), 
     timeoutKey = -1; 

    $(document).on('scroll', function() { 
     if(timeoutKey) { 
      window.clearTimeout(timeoutKey); 
     } 
     timeoutKey = window.setTimeout(function(){ 

      if (view.scrollTop() < 100) { 
       button.fadeIn(); 
      } 
      else { 
       button.fadeOut(); 
      } 
     }, 100); 
    }); 
} 

$('#my-button').on('click', function(){ 
    $('html, body').stop().animate({ 
     scrollTop: 0 
    }, 500, 'linear'); 
    return false; 
}); 

//call function on document ready 
$(function(){ 
    showButton(); 
});