javascript - 滚动动画在 IE 和 Mozilla 上不起作用

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