像MEGA.co.nz下载页面上的向下滚动到页面底部，向上滚动到顶部的系统

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

我想要做的是创建类似于MEGA.co.nz网站所拥有的系统，例如this页面。基本上有两个容器，分别包含两个独立的页面。一个在#top中，另一个在#page中。pagestart决定它应该从#top还是#page开始。 #top始终与用户窗口高度相同（因此没有滚动条）。当你向下滚动时，当#top处于活动状态时，或者点击某个链接时，#top将向上滚动到屏幕上方，#page将从底部向上滚动。当#page处于活动状态时（可能比用户的窗口高），并且您在页面顶部然后仍然向上滚动（或单击链接），#page将向下滚动到屏幕下方，#top将从顶部向下滚动。

这将导致一个页面，当您向下滚动时，动画开始移动#top在屏幕上方，并显示#page，然后您将能够正常滚动。当您在页面顶部并向上滚动时，#top将再次弹出。

难以解释，因此建议单击this，查看MEGA.co.nz如何实现它。

如何实现此效果？

- Thew

Answer 1

演示

---

*使用jQuery鼠标滚轮插件

---

HTML结构

<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);
});

- kei

---

感谢您的出色工作。如果我想在页面上启动而不是在顶部，我可以将＃splash的高度设置为0，是这样吗？ - Thew