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

Lo que estoy tratando de hacer es crear una especie de sistema como el que tiene el sitio MEGA.co.nz, por ejemploesta página.

Básicamente dos contenedores, que contienen dos páginas separadas. Uno en#top, y el otro en#page. pagestart determina si debe comenzar con#top o#page. #top siempre tiene la misma altura que la ventana del usuario (por lo tanto, no tiene barra de desplazamiento). Cuando se desplaza hacia abajo cuando#top está activo, o haga clic en un enlace en alguna parte,#top se desplazará hacia arriba sobre la pantalla y#page se desplazará hacia arriba desde la parte inferior. Y cuando#page está activo (que puede ser más alto que la ventana del usuario), y está en la parte superior de la página y luego sigue subiendo (o haciendo clic en un enlace),#page se desplazará hacia abajo debajo de la pantalla y#top se desplazará hacia abajo desde la parte superior.

El resultado será una página en la que, cuando se desplaza hacia abajo, comienza una animación que se mueve.#top por encima de la pantalla y aparece la#page, y luego podrás desplazarte normalmente. Y cuando está en la parte superior de la página y se desplaza hacia arriba,#top aparecerá de nuevo.

Difícil de explicar, por eso recomiendo hacer clic.esta y viéndolo como MEGA.co.nz lo ha implementado.

¿Cómo puedo lograr este efecto?