javascript - 自动滚动页面

Question

我正在处理一个显示信息表的信息屏幕，该信息表通常很长，所以我希望它自动缓慢向下滚动，直到到达底部，逐渐变白，向上滚动，然后从白色，在一些延迟之后重复整个过程。

目前我有这段代码:

var iInterval = 2000;
var iScrollInterval = 5000;
var iFadeInterval = 500;

var loop = function() {
    var iScroll = $(document).height() - $(window).height();
    $("html, body").animate({
        scrollTop: iScroll
    }, {
        duration : iScrollInterval, 
        easing : "linear", 
        complete : function() {
            $("body").fadeOut(iFadeInterval).delay(iFadeInterval);
            $("html, body").scrollTop(0);
            $("body").fadeIn(iFadeInterval);
        }
    });             
    setTimeout(loop, iInterval);
};
setTimeout(loop, iInterval);

该代码的问题是向下滚动到底部，立即再次跳到顶部，没有淡出，并立即继续向下滚动，没有延迟。

此行为会重复 2-3 次，直到第三次到达页面底部时，最终发生淡入/淡出白色。

毫无疑问我在这里误解了什么，但是什么？

Answer 1

我已经有一段时间没有使用 jQuery 了，但是在查看了您的代码之后，我发现了一些事情:

1. 为什么要同时滚动 HTML 和 BODY？

2. 页面跳回，因为您没有在此处设置动画:

   $("html, body").scrollTop(0);

所有其他问题都源于此。如果我有时间，我会用 fiddle 更新我的答案

fiddle :

http://jsfiddle.net/64etqaxc/1/

var iInterval = 2000;
var iScrollInterval = 5000;
var iFadeInterval = 500;

var loop = function() {
    var iScroll = $(document).height() - $(window).height();
    $("html").animate({
        scrollTop: iScroll
    }, {
        duration : iScrollInterval, 
        easing : "linear", 
        complete : function() {
            $("body").fadeOut(iFadeInterval, function(){ 
                $("html").scrollTop(0);
                $("body").fadeIn(iFadeInterval,function(){ 
                    loop();
                });
            });            
        }
    });                    
};

loop();