FlexBoxでScrollTopを使用すると動作しません

Question

nav、main、footer、3つのタグがあります。私はそれらをFlexBoxに適用しました：

body { 
    color: #ddd; 
    font-family: Gotham; 
    background: url(../assets/body-background.png); 
    display: flex; 
    min-height: 100%; 
    flex-direction: column; 
} 
main { 
    flex: 1; 
} 

すべてが非常によく見えます。しかし、物事は私が（jQueryの使用）私のスクリプトファイルに次のコードを持っている

後に悪化している：

$('.scroll-top').click(function() { 
    $('body').animate({ 
    scrollTop: 0 
    }, 1000); 
}) 

が、ページのスクロールアニメーションが動作していない

jsfiddle

$('a').click(function(){ 
 
\t $('body').animate({ 
 
     scrollTop: 0 
 
    }, 1000); 
 
})

nav{ 
 
    padding: 10px; 
 
    background: grey; 
 
} 
 
main{ 
 
    height:800px; 
 
    background: lightgrey; 
 
} 
 
footer{ 
 
    padding: 10px; 
 
    background: grey; 
 
} 
 
body{ 
 
    display: flex; 
 
    min-height: 100vh; 
 
    flex-direction: column; 
 
} 
 
main{ 
 
    flex: 1; 
 
} 
 
a{ 
 
    position: fixed; 
 
    right: 40px; 
 
    bottom: 40px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<nav>nav content</nav> 
 
<main>main content</main> 
 
<a href="javascript:;">scroll top</a> 
 
<footer>footer content</footer>

Answer 1

Chromeで正常に動作しますが、Firefoxでは動作しません。スクロールは、Firefoxで動作するためには、あなたがhtmlにscrollTopスプライトを使用する必要があります。

$('body,html').animate({ 
    scrollTop: 0 
}, 1000); 

またmainは、あなたがFirefoxでそれに割り当てられている800ピクセルになりません。同じ動作のクロスブラウザでflex: 1をflex: 1 1 800pxに変更してください。

デモは、以下を参照してください：

$('a').click(function() { 
 
    $('body,html').animate({ 
 
    scrollTop: 0 
 
    }, 1000); 
 
})

nav { 
 
    padding: 10px; 
 
    background: grey; 
 
} 
 

 
main { 
 
    height: 800px; 
 
    background: lightgrey; 
 
} 
 

 
footer { 
 
    padding: 10px; 
 
    background: grey; 
 
} 
 

 
body { 
 
    display: flex; 
 
    min-height: 100vh; 
 
    flex-direction: column; 
 
} 
 

 
main { 
 
    flex: 1 1 800px; /* NEW */ 
 
} 
 

 
a { 
 
    position: fixed; 
 
    right: 40px; 
 
    bottom: 40px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<nav>nav content</nav> 
 
<main>main content</main> 
 
<a href="javascript:;">scroll top</a> 
 
<footer>footer content</footer>