javascript - jQuery scrollTo 并隐藏一个元素

Question

根据我的上一篇文章，我询问了如何制作一个充满屏幕的 div，滚动到另一个 div。我已经隐藏了，所以我必须先淡入那个元素。现在可以了。但现在我想隐藏我滚动的第一个 div。

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

这是来自第一个 div 的 CSS 代码，来自滚动 FROM:

#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 来查看演示:

http://jsfiddle.net/89UdF/1/

Answer 1

试试这个 fiddle

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