jQuery滚动100％高度div

Question

我将有许多高度为100vh的div，例如＃pg1，＃pg2彼此堆叠。 然后，如果我向下滚动一点或按箭头按钮（链接到右上角的图像），它将使另一个div位置平稳地占据页面的100％。

编辑：像这样的东西（不完全是）： http : //jsfiddle.net/wofbbzjy/

<div id="pg1">Teste</div>
<div id="pg2">Teste</div>
<div id="pg3">Teste</div>

$(document).ready(function(){
    $(window).scroll(function(){
        var content_height = $(document).height();
        var content_scroll_pos = $(window).scrollTop();
        var percentage_value = content_scroll_pos * 100 / content_height;

        if(percentage_value >= 0){
            $('html,body').animate({
              scrollTop: $('#pg2').position().top
            }, 1000);
            return false;
        }
    });
});

#pg1, #pg2 {
    background-color: grey;
    height: 100vh;
    width: 100%;
}
#pg2 {
    background-color: yellow;
}
#pg3 {
    background-color: black;
}

Answer 1

你的问题是什么？ 您是否想知道该怎么做->使100vh页面在滚动时彼此滑动？

编辑

好的。 这就是您可以做的（也许有更好的方法）：

1. 使身体溢出：隐藏；
2. 将第一个div固定为100vh。
3. 使其他div相对，并将它们放置在彼此下方（不堆叠）
4. 给div一个不同的z索引，使它们彼此对齐。
5. 然后使用jQuery通过将div的Y位置为0时将css位置更改为fixed来将其锁定在页面顶部。

（顺便说一下，有很多开源项目可以为您做到这一点。我强烈建议您检查一下）

Answer 2

你的意思是这样吗？ http://jsfiddle.net/LBBO/dj0cv286/1/

var visible = null;
function scrollTo(element){
    $('html, body').animate({ scrollTop: ($(element).position().top)}, 'slow');
};
$(document).ready(function() {
    visible = $('div').first();
    $(window).keyup(function(e) {
        if(e.which == 38) {
            visible = visible.prev();
            scrollTo(visible);
        }
        if(e.which == 40) {
            visible = visible.next();
            scrollTo(visible);
        }
    });
});