Switching between two circuits

How to learn more about jQuery, I am trying to make a function that will scroll to the bottom of the page, back to the top, and then run again in an infinite loop.

So far I got this

var scroll = $(document).scrollTop();

setInterval(function(){
        scroll += 5;
        $(document).scrollTop(scroll);
}, 10);

      

This will scroll to the bottom of the page.

When it hits the bottom it needs to set a flag, perhaps var direction = 1

where 1 is down and 0 is up.
Now I need to add something like

if(direction){
    // scroll down
} else {
    // scroll up
}

      

So, I IF was constantly checking the value direction

and incrementing scroll

var by + = 5 or - = 5

Does this sound logical or is there a much easier way to achieve this?

EDIT

Here is a working version of somethingthing

https://jsfiddle.net/Panomosh/evkxou3e/

+3


source to share


2 answers


You have to use the jQuerys callback to create an infinitely recursive function. Just add the function after the declaration to your animation function, and then call the same function, but invert the boolean passed.

Plus, the animation will make this increment very nice and smooth for you!

function scrollTopOrBottom(top){
    if(top) $("body, html").animate({scrollTop: 0}, function(){
        scrollTopOrBottom(false);
    });
    else $("body, html").animate({scrollTop: $("document").height()}, function(){
        scrollTopOrBottom(true);
    });
}

scrollTopOrBottom(false);

      



Update. As mentioned, this might create * * ahem * * Stack Overflow, but the question is not related to this question at the moment. If you want to be safe, use stop()

after each statement $("body, html")

to stop the call if another is in progress, so postpones overflow.

Note. You can also wrap the operator if

in {}

, but since it's a single operator, I find it more legible, more code-like, code-like. But this is a preference.

+8


source


You can set the direction value to either 1

scroll down or -1

scroll up.

Then when the scroll value changes, you can do something like:



scroll += 5 * direction;

      

0


source







All Articles