Question

根据我的上一篇文章，我问如何制作一个填充屏幕的div，滚动到另一个div。我已经隐藏了，所以我不得不首先淡化该元素。现在有效。但是现在我想制作第一个div，在那里我滚动，隐藏。

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

首先从滚动FROM：

获得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看演示：

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

jQuery scrollTo并隐藏一个元素

1 个答案: