0

尝试制作简单的 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/

4

2 回答 2

3

这工作，在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图

那么在上面的等式中不要使用体高，而是使用渐变段的总高度；大约 210 像素。该值将替换上面 jQuery 中的 var 高度。如果您在执行此操作时遇到问题，请告诉我。没有注意到您对上述答案的评论。

于 2011-11-23T22:15:39.723 回答
1

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

到

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

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

于 2011-11-23T22:12:20.917 回答