Javascript 向下滚动至第页，向上滚动至顶部系统，就像在MEGA.co.nz下载页面上一样 var pagestart=0； var currentlyat=pagestart； var lastScrollTop=0； $（文档）.ready（函数（）{ 功能滚动页面至（a）{ 如果（a==0）{ $（'#top'）.show（）； $（“#顶部”）。设置动画({ 排名：0 }，1000，功能（事件）{ $（'#page'）.css（'top'，$（window.height（））.hide（）； }); } 其他的 { $（“#页”）.hide（）； $（“#页”）。设置动画({ 排名：0 }，1000，功能（事件）{ $（'#top'）.css（'top'，$（window.height（））.hide（）； }); } } 如果（pagestart==0）{ $（'#top'）.css（'height'，$（window.height（））； $（“#页”）.hide（）； } 其他的 { $（'#top'）.hide（）； $（'#page'）.css（'height'，$（window.height（））； } $（窗口）。滚动（函数（）{ 如果（currentlyat==0）{ if（$（this.scrollTop（）lastScrollTop）&&&$（this.scrollTop（）==0）{ 滚动至（0）； } } }); });

我想做的是创建一种类似于MEGA.co.nz网站的系统，例如在第页

基本上是两个容器，其中包含两个单独的页面。一个在

#top

中，另一个在

#page

中

pagestart

确定它应该以

#top

还是

#page

开头

#top

始终与用户窗口的高度相同（因此没有滚动条）。当

#top

处于活动状态时向下滚动，或单击某个链接时，

#top

将在屏幕上方向上滚动，而

#page

将从底部向上滚动。当

#页面

处于活动状态时（可以比用户窗口高），您位于页面顶部，然后仍然向上滚动（或单击链接），

#页面

将在屏幕下方向下滚动，而

#顶部

将从顶部向下滚动

这将产生一个页面，当你向下滚动时，一个动画开始在屏幕上方移动

#top

，并显示

#页面

，然后你将能够正常滚动。当您位于页面顶部并向上滚动时，

#top

将再次弹出

很难解释，所以这就是为什么我建议单击并将其视为MEGA.co.nz已经实现了它

我怎样才能达到这个效果？

---

*使用

---

HTML结构

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

jQuery

/* 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%;
}

/*滚动事件*/
$（“#飞溅”）。在（“鼠标滚轮”上，函数（e）{
if（e.deltaY 0&&$（this）.scrollTop（）感谢您的出色工作。当我想从页面开始，而不是从顶部开始时，我可以将
#splash
的高度设置为0，对吗？
/* 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%;
}

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