plugin - Muestre el elemento del enlace “Volver al principio” utilizando jQuery cuando se desplace hacia abajo

jquery scroll position of window

Question

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

Simplemente mire la esquina inferior derecha, desplácese hacia abajo un poco y verá el botón "volver al principio".

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

¿Cómo puedo hacer eso en jQuery?

Answer 1

Vieja pregunta pero pensé desde que implementé una para darme mis dos centavos. Creo que es mejor usar un setTimeout para proteger contra varios eventos desencadenados. Me gusta esto:

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();
});

Answer 2

Puede controlar la posición actual de desplazamiento de la ventana y actuar en consecuencia. Si desea que la compensación sea posterior a un punto determinado (el código siguiente hará cualquier desplazamiento, incluso 1px), simplemente verifique que $(this).scrollTop() > n en la instrucción if, donde n es la compensación deseada.

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

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