滾動動畫在 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);
    });
});