Question

我有一个填充屏幕的元素，在那下面是另一个元素，但是这个元素是隐藏的，所以你不能手动滚动它。

我的CSS样式表就是这样的：

body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
#page1, #content {
    height: 100%;
    width: 100%;
    position: absolute;
}
#content {
    top: 100%;
    display:none;
}

#page1代表填充屏幕的元素，而#content代表位于其下方的元素。

当我点击第一个元素上的一个按钮（填满屏幕）时，它会显示该元素下的元素并平滑地向下滚动到该元素。

我首先使用这段代码：

$(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);
            $(document).scrollTop(0);
        });
    });
});

在IE和Mozilla中工作，但我试图改进它......

现在我正在使用此代码：

$(function() {
    var headerLoaded = true,
            contentLoaded = false,
            header = "#fitScreen",
            exploreBtn = "#exploreBtn",
            scrollBackBtn = "#scrollBackBtn",
            content = "#content";



    $(exploreBtn).on('click', function() {
        if (!contentLoaded && headerLoaded) {
            showScrollHide(content, header, function() {zit
                var sum = ($('nav').height()) + parseInt($('nav').css('margin-bottom'));
                $('#panelContent').css('margin-top', sum);


                $('#content').css('top', 0);
                $('html, body').css('overflow-y', 'auto');

                $(window).scrollTop(0);

                headerLoaded = false;
                contentLoaded = true;
            });
        }
    });

    var showScrollHide = function(element, hide, func) {
        $(element).fadeIn(500, function() {
            $('body').animate({
                scrollTop: $(element).offset().top
            }, 1000, function() {
                $(hide).fadeOut(100, func);
            });
        });
    };

});

由于某种原因，它不适用于IE和Mozilla。

它只是给了我一点延迟，然后它在屏幕上逐渐消失。

任何人都可以帮我吗？

Answer 1

在新代码中，你有这个部分：

$(element).fadeIn(500, function() {
    $('body').animate({
        scrollTop: $(element).offset().top
    }, 1000, function() {
        $(hide).fadeOut(100, func);
    });
});

您的工作代码与不工作代码之间的区别在于您为滚动设置动画的元素。

在您正在使用的代码中，您可以设置'body, html'动画。根据浏览器的不同，滚动条不在同一元素上。因此，这就是你应该同时定位html和body元素的原因：

$(element).fadeIn(500, function() {
    $('html, body').animate({ //HERE!
        scrollTop: $(element).offset().top
    }, 1000, function() {
        $(hide).fadeOut(100, func);
    });
});

滚动动画无法在IE和Mozilla上运行

1 个答案: