Облегченная функция scrollUp - jQuery - PullRequest
Новая
       15

Облегченная функция scrollUp - jQuery

0 голосов
/ 24 ноября 2011

Попытка создать простую функцию jQuery для создания кнопки scrollToTop, которая появляется при прокрутке вниз. 

$(document).ready(function() {
    var start = 300;
    var duration = 200;
    var scrolled;

    $('.scrollUp').css('opacity', '0.0');

    $(window).scroll(function(){ 

        var opacity = (scrolled - start) / duration;

        scrolled = $(window).scrollTop();

        if (0 < opacity < 1) {
            $('.scrollUp').css('display', 'block').css('opacity', opacity);
        } else if (1 < opacity) {
            $('.scrollUp').css('display', 'block').css('opacity', '1.0');
        } else {
            $('.scrollUp').css('display', 'none').css('opacity', '0.0');
        }
    });

    $('.scrollUp').click(function(){
        $('html, body').animate({
            scrollTop: 0
        }, 500);
    });
});

Смотрите это в действии здесь: http://jsfiddle.net/JamesKyle/fBvGH/

Ответы [ 2 ]

3 голосов
/ 24 ноября 2011

Это работает, проверено в jsfiddle : 

$(document).ready(function() {
    var start = 300;
    var duration = 200;
    var scrolled;

    $('.scrollUp').css('opacity', '0.0');

    $(window).scroll(function(){ 

        var opacity = (scrolled - start) / duration;

        scrolled = $(window).scrollTop();

        if (0 < opacity < 1) {
            $('.scrollUp').css('display', 'block').css('opacity', opacity);
        } else if (1 < opacity) {
            $('.scrollUp').css('display', 'block').css('opacity', '1.0');
        } else {
            $('.scrollUp').css('display', 'none').css('opacity', '0.0');
        }
    });

    $('.scrollUp').click(function(){
        $('html,body').animate({
            scrollTop: 0
        }, 500);
    });
});

Обновление:

И вот рабочий пример с анимацией непрозрачности. Похоже, этот парень искал то же уравнение.

Лучше использовать математику в такой ситуации: 

scrolled = $(window).scrollTop();
height = $('body').height();
height = Math.ceil((scrolled / height) * 100);
height = height / 100;

Второе обновление

Хорошо, вы хотите, чтобы он начал появляться после темно-синей секции. Итак, что вам нужно сделать, это исключить эту часть вершины до градиента. Вы можете сделать это, создав предложение if, которое проверяет, достигло ли значение scrollTop верхней части светло-синего градиента; около 300 пикселей от верхней части документа. jsFiddle diagram

Тогда вместо использования высоты тела в вышеприведенном уравнении используйте общую высоту сечения градиента; около 210px. Это значение заменит высоту var в jQuery выше. Дайте мне знать, если у вас есть проблемы с реализацией этого. Не заметил, что вы комментируете приведенный выше ответ.

1 голос
/ 24 ноября 2011

scrollTop не является свойством window, поэтому просто немного измените код: $(window).animate({scrollTop : 0},500);

до

$('html, body').animate({scrollTop : 0},500);

вот обновленный jsfiddle: http://jsfiddle.net/fBvGH/13/

...