Показать элемент "Вверх" вверх, используя jQuery при прокрутке вниз

Я хочу воспроизвести поведение с помощью jQuery, как вы можете видеть здесь: http://edo.webmaster.am/

Просто взгляните на правый нижний угол, прокрутите вниз немного, и вы увидите кнопку "назад к началу".

Таким образом, он невидим, пока вы не прокрутите страницу вниз, а затем появится (анимированная).

Как я могу сделать это в jQuery?

Ответ 1

Вы можете контролировать текущую позицию прокрутки окна и действовать соответствующим образом. Если вы хотите, чтобы смещение было после определенной точки (код ниже будет прокручиваться, даже 1px), тогда просто проверьте, что $(this).scrollTop() > n в инструкции if, где n - желаемое смещение.

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

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

Ответ 2

Старый вопрос, но я думал, так как я реализовал один для себя, чтобы дать свои два цента. Я считаю, что лучше использовать setTimeout для защиты от множества инициируемых событий. Вот так:

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