ScrollTop when scroll is detected

Question

I want to make a feature like the one on this page. B&O BeoPlay A3

When you scroll down it automatically scrolls all the way to the next page.

I have been playing around with window.pageYOffset. I have this so far:

window.onscroll = scroll;

        function scroll () {
            setTimeout(function() {
                if (window.pageYOffset < 100 && window.pageYOffset > 2) {
                    scrollLogin();
                }
                else if (window.pageYOffset > 100 && window.pageYOffset < 159 && window.pageYOffset != 124) {
                    scrollSky();
                }
                else if (window.pageYOffset > 159 && window.pageYOffset < 248) {
                    scrollCity();
                }
            },500);
        }
        function scrollLogin() {
            $('html,body').animate({
                scrollTop: $("#login").offset().top
            }, 500);
        }
        function scrollSky() {
            $('html,body').animate({
                scrollTop: $("#skyContainer").offset().top
            }, 500);
        }
        function scrollCity() {
            $('html,body').animate({
                scrollTop: $("#city").offset().top
            }, 500);
        }

The problem is that this way is not working seamless at all. I have to wait 500ms until I scroll again. And if this also only works with a fixed screen resolution. Do you know a better way do archive this feature? That also allows percentage measures so that it works on different resolution monitors?

Link to my attempt .

So I want 3 states that the viewport sticks to: top (the login bar), middle (the sky animation) and bottom (the search bar).

Thank you very much!

EDIT:

TAKE 2:

I made a variable that tells me if the animation is ended. It is simply has the value as '1' while the animation is on, this prevents all sorts of chaos.

So I have the script working pretty well now. The only catch is that it only works with exactly my innerHeight and innerWidth. (innerHeight: 863 - innerWidth: 1440).

Is there a way to make window.pageYOffset in percentages? And is this the best way to archive this effect?

Thank you, have a nice day.

This is my new code:

window.onscroll = scroll;

        var animationIsOn = 0;

        function scroll () {
            if (animationIsOn == 0) {
                var pageY = window.pageYOffset;
                if (pageY < 119 && pageY > 69) {
                    scrollLogin();
                }
                else if (pageY > 5 && pageY < 69 || pageY > 179 && pageY < 254) {
                    scrollSky();
                }
                else if (pageY > 129 && pageY < 179) {
                    scrollCity();
                }
            }
        }
        function scrollLogin() {
            animationIsOn = 1;
            $('html,body').animate({
                scrollTop: $("#login").offset().top
            }, 500, function() {
                animationIsOn = 0;
            });
        }
        function scrollSky() {
            animationIsOn = 1;
            $('html,body').animate({
                scrollTop: $("#skyContainer").offset().top
            }, 500, function() {
                animationIsOn = 0;
            });
        }
        function scrollCity() {
            animationIsOn = 1;
            $('html,body').animate({
                scrollTop: $("#city").offset().top-600
            }, 500, function() {
                animationIsOn = 0;
            });
        }

Answer 1

To get pageYOffset as a percentage, simply divide pageYOffset by document.documentElement.scrollHeight and multiply by a 100.

EDIT: Ckrill has found that he needed to use window.innerHeight and not the document's scrollHeight property.