轻量级的scrollUp函数 - jQuery

Question

尝试使用简单的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/

Answer 1

这可以在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);
    });
});

---

更新

here's使用不透明度动画的工作示例。 看起来this guy正在寻找相同的等式。

最好在这种情况下使用一些数学：

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

---

第二次更新

好的，你希望它开始出现在深蓝色部分之后。好的，所以你需要做的是在渐变之前排除顶部的那部分。您可以通过创建一个if子句来检查scrollTop值是否已经达到淡蓝色渐变的顶部;距文档顶部约300px。

然后，不使用上述等式中的身高，而是使用渐变部分的总高度;约210px。该值将替换上面jQuery中的var height。如果您在实施此问题时遇到问题，请告诉我。没注意到你对上述答案的评论。

Answer 2

scrollTop不是window属性，因此只需稍微更改一下代码： $(window).animate({scrollTop : 0},500);

到

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

这是更新的jsfiddle：http://jsfiddle.net/fBvGH/13/