Bildlauf nach unten bis zur Seite, Bildlauf nach oben bis zum oberen System wie auf einer MEGA.co.nz-Downloadseite

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

Was ich versuche, ist, ein ähnliches System wie beispielsweise die Website von MEGA.co.nz zu erstellendiese Seite.

Grundsätzlich zwei Container, die zwei separate Seiten enthalten. Eins in#topund der andere in#page. pagestart legt fest, ob es mit beginnen soll#top oder#page. #top Hat immer die gleiche Höhe wie das Benutzerfenster (hat also keine Bildlaufleiste). Wenn Sie nach unten scrollen, wenn#top aktiv ist oder irgendwo auf einen Link klicken,#top wird über dem Bildschirm nach oben scrollen und#page wird von unten nach oben scrollen. Und wann#page ist aktiv (die größer sein kann als das Fenster des Benutzers), und Sie befinden sich oben auf der Seite und rollen immer noch nach oben (oder klicken Sie auf einen Link).#page wird unter dem Bildschirm nach unten scrollen und#top wird von oben nach unten scrollen.

Daraus ergibt sich eine Seite, auf der beim Scrollen nach unten eine Animation gestartet wird, die sich bewegt#top über dem Bildschirm und bringt die#pageund dann können Sie normal scrollen. Und wenn Sie oben auf der Seite sind und nach oben scrollen,#top wird wieder auftauchen.

Schwer zu erklären, deshalb empfehle ich zu klickendiese und zu sehen, wie MEGA.co.nz es implementiert hat.

Wie kann ich diesen Effekt erzielen?