CODEWITHSUNDEEP
javascriptjqueryhtml
Gipphe
Gipphe

Reputation: 179

Automatically scrolling page

I'm working on an info screen that displays a table of informations which usually is quite long, so I want it to scroll slowly down automatically until it reaches the bottom, fades to white, scroll back up, and fades out from white, repeating the process all over after some delays.

Currently I have this code: 

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);

The problem with that code is that scrolls down to the bottom, immediately jumps to the top again, without fading and keeps scrolling down immediately without delay.

This behavior is repeating 2-3 times until, finally, the fading to/from white happens, once the bottom of the page is reached for the 3rd time.

There's no doubt I've misunderstood something here, but what?

Upvotes: 1

Views: 131

Answers (1)

Tomas
Tomas

Reputation: 2726

I haven't been using jQuery for a while, but after looking at your code there is couple of things:

  1. Why are you scrolling both HTML and BODY?

  2. The page jumps back up because you are not animating it here:

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

And al other problems derive from that. If I have a minute I will update my answer with 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();

Upvotes: 2

Related Questions