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

O que estou tentando fazer é criar o sistema que o site MEGA.co.nz possui, por exemploesta página.

Basicamente, dois contêineres, que contêm duas páginas separadas. Um em#tope o outro em#page. pagestart determina se deve começar com#top ou#page. #top sempre tem a mesma altura da janela do usuário (não tendo, portanto, barra de rolagem). Quando você rola para baixo quando#top está ativo ou clique em um link em algum lugar,#top rolará acima da tela e#page rolará para cima a partir da parte inferior. E quando#page está ativo (que pode ser mais alto que a janela do usuário), você está no topo da página e continua rolando para cima (ou clique em um link),#page rolará para baixo abaixo da tela e#top rolará para baixo a partir do topo.

Isso resultará em uma página em que, quando você rolar para baixo, inicia uma animação que se move#top acima da tela e exibe o#pagee você poderá rolar normalmente. E quando você está no topo da página e rola para cima,#top irá aparecer novamente.

Difícil de explicar, é por isso que recomendo clicaresta e vendo como o MEGA.co.nz o implementou.

Como posso conseguir esse efeito?