Question

为了让#top在滚动到顶部后消失，我可以添加到下面的代码中？

$(document).ready(function() {
    $('#top').hide();
        $(window).scroll(function () {
            $('#top').fadeIn(3500);
        });
        $('#top').click(function(){
            $('html, body').animate({scrollTop:0}, 'fast');
            return false;
    });
});

Answer 1

在您对animate()的调用中添加回调：

$(document).ready(function() {
    var topClicked = false;
    $('#top').hide();
        $(window).scroll(function () {
            if (!topClicked) {
                $('#top').fadeIn(3500);
            }
        });
        $('#top').click(function(){
            topClicked = true;
            $('html, body').animate({scrollTop:0}, 'fast', function() {
                $("#top").hide();
            });
            return false;
    });
});

更新：还添加了一个变量，滚动处理程序在显示#top元素之前检查该变量，以便在单击后不会再次显示该变量。这是一个例子：http://jsfiddle.net/eunX3/1/

更新2：如果您想淡化元素，请参阅以下示例：http://jsfiddle.net/eunX3/2/

更新3：以下是您多次使用此功能的方法：

$(document).ready(function() {
    var topClicked = false;
    $('#top').hide();
        $(window).scroll(function () {
            if (!topClicked && $(this).scrollTop() > 0) {
                $('#top').fadeIn(3500);
            }
        });
        $('#top').click(function(){
            topClicked = true;
            $('html, body').animate({ scrollTop:0 }, 'fast', function() {
                $("#top").hide();
                topClicked = false;
            });
            return false;
    });
});

以下是一个有效的例子：http://jsfiddle.net/eunX3/4/

在scrollTop之后使元素消失

1 个答案: