Scroll down to page, scroll up to top system like

Question

var pagestart = 0;
var currentlyat = pagestart;
var lastScrollTop = 0;

$(document).ready(function(){

    function scrollPageTo(a){
        if(a == 0){
    $('#top').show();
    $('#top').animate({
        top: 0
    }, 1000, function(event){
        $('#page').css('top', $(window).height()).hide();
    });
        }
        else
        {
    $('#page').hide();
    $('#page').animate({
        top: 0
    }, 1000, function(event){
        $('#top').css('top', $(window).height()).hide();
    });
        }
    }

    if(pagestart == 0){
        $('#top').css('height', $(window).height());
        $('#page').hide();
    }
    else
    {
        $('#top').hide();
        $('#page').css('height', $(window).height());
    }

    $(window).scroll(function(){
        if(currentlyat == 0){
    if(($(this).scrollTop() < lastScrollTop) && $(this).scrollTop() == 0){
        scrollPageTo(1);
    }
        }
        else
        {
    if(($(this).scrollTop() > lastScrollTop) && $(this).scrollTop() == 0){
        scrollPageTo(0);
    }
        }
    });
});

http://jsbin.com/uZiDaXud/1/edit

What I'm trying to do is create sort of like the system the site MEGA.co.nz has, on for example this page.

Basically two containers, wich hold two separate pages. One in #top, and the other one in #page. pagestart determines if it should start with #top or #page. #top always has the same height as the user's window (thus having no scrollbar). When you scroll down when #top is active, or click a link somewhere, #top will scroll up above the screen and #page will scroll up from the bottom. And when #page is active (which can be taller then the user's window), and you're on the top of the page and then still scroll up (or click a link), #page will scroll down below the screen and #top will scroll down from the top.

What this will result into is a page where when you scroll down, an animation starts which moves #top above the screen and brings up the #page, and then you'll be able to scroll normally. And when you're at the top of the page and you scroll up, #top will pop up again.

Hard to explain, so that's why I recommend clicking this and seeing it as MEGA.co.nz has implemented it.

How can I achieve this effect?

Answer 1

DEMO

---

*Uses jQuery mouse wheel plugin

---

HTML structure

<div id="wrapper">
    <div id="splash">
        <div id="splash-footer">Show content</div>
    </div>
    <div id="content">
        <div id="content-header">Show splash</div>
        <div><!-- content here --></div>
    </div>
</div>

CSS

/* css normalized */
html, body {
    height:100%;
    width:100%;
    overflow:hidden;
}
#wrapper {
    height:100%;
}
#splash {
    position:relative;
    background-color:#cce;
    height:100%;
}
#splash-footer {
    position:absolute;
    bottom:0;
    width:100%;
}
#content {
    position:relative;
    height:100%;
    overflow:auto;
}
#content-header {
    position:absolute;
    top:0;
    width:100%;
}

jQuery

/* scroll events */
$("#splash").on("mousewheel", function (e) {
    if (e.deltaY <= 0) {
        $('#splash').animate({
            height: 0
        }, 500);
    }
});
$("#content").on("mousewheel", function (e) {
    if (e.deltaY > 0 && $(this).scrollTop() <= 0) {
        $('#splash').animate({
            height: '100%'
        }, 500);
    }
});

/* click events */
$("#splash-footer").on("click", function () {
    $('#splash').animate({
        height: 0
    }, 500);
});
$("#content-header").on("click", function () {
    $('#splash').animate({
        height: '100%'
    }, 500);
});