Javascript jQuery滚动并隐藏一个元素

根据我上一篇文章，我问过如何制作一个div，它会填满屏幕，滚动到另一个div。我已经隐藏了，所以我必须先淡入该元素。现在可以了。但是现在我想把我滚动的第一个div隐藏起来

我知道我想要滚动到的第二个div的top属性被设置为100%，但是当我将其改回0时，在我的jQuery代码中，它看起来非常难看

以下是滚动的第一个div i中的CSS代码：

#fitScreen {
    position: relative;

    height: 100%;
    width: 100%;

    z-index: 0;
    background-color: black;

    overflow: hidden;
}

下面是我滚动到的CSS代码：

#content {
    display: none;
    position: absolute;

    width: 100%;
    height: 100%;

    top: 100%;
}

下面是我用来让它滚动的JS：

$(document).ready(function() {
    $('#exploreBtn').on('click', function() {
        $('#content').fadeIn(500, function() {
            $('html, body').animate({
                scrollTop: $("#content").offset().top
            }, 750);
            //I tried adding these lines, but that did'nt work :(
            $('#fitScreen').delay(500).fadeOut(500); 
            $('#content').delay(500).css('top', '0');
        });
    });
});

这里有一个jsFiddle来查看演示：

试试这个

---

啊，谢谢，伙计，它确实有效，但有一个问题，当它隐藏完“页面1”后，它会在“内容”窗口上向下滚动一点，我可以防止吗？有没有办法，再次显示“页面1”，然后再滚动回那个页面C、 @jacelyshthere是的，但是你必须添加一些东西来触发它。比如，“内容”窗口中的另一个按钮。对不起，我现在不在办公室，我会在几个小时后上网。

$(document).ready(function() {
    $('#exploreBtn').on('click', function() {
        $('#content').fadeIn(500);
        console.log($("#content").offset().top)
        $('html, body').animate({
            scrollTop: $("#content").offset().top
        }, 1000, function(){
            $("#page1").css('display','none');
            $('#content').css('top',0); 
            $(window).scrollTop(0);       
        });
    });
});