Button to go up and down depending on where the user is

Question

So, Im trying to create a button that will either scroll to the next section or a given pixel height. The website is divided into three section which has the same height. So when the user enters the site and everything else is loaded the button fades in, onclick the user is brought down to the second section without scrolling and one click again the third section, and thats the end of the website so when reach the third I want the user to be brought home. Here´s my code:

        <script type="text/javascript">
            $(document).ready(function() {
                if (document.body.scrollTop === 0) {
                    $("#down").fadeIn();
                $("#down").click(function(event){
                $("html, body").animate({scrollTop: "+=810px"}, 800);
            });
        }
                window.onscroll = function(ev) {
                if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
                $("#down").fadeOut();
                $("#top").fadeIn();
                $("#top").click(function(event) {
                    $("html, body").animate({scrollTop: 0}, 800);
                });
    }
};
        });
        </script>

Answer 1

I can't reproduce the problem in jsfiddle.

Is this not what you're getting?

http://jsfiddle.net/rLY2L/

If it works the first time, but not subsequent times, are there any non-static components that haven't been mentioned?

Event delegation might be the solution to your problem if there are dynamic components being loaded in.

$("body").on("click", "#down", function(e){
   // do stuff
});

Event delegation example: http://jsfiddle.net/gd6J2/1/