L'utilisation de ScrollTop dans FlexBox ne fonctionne pas

Question

nav, main, footer, il y a 3 tags. Je les ai appliqués à FlexBox:

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

tout semble si bon. mais les choses empirent après

Je le code suivant dans mon fichier de script (en utilisant jQuery):

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

mais l'animation de défilement de la page ne fonctionne pas

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

Cela fonctionne très bien dans Chrome, mais ne fonctionne pas dans Firefox. Pour le défilement pour travailler dans Firefox, vous devez utiliser scrollTop sur html:

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

De plus, le main ne prendra pas le 800px que vous avez affecté dans Firefox. Remplacez flex: 1 par flex: 1 1 800px pour le même comportement de navigateur croisé.

Voir la démo ci-dessous:

$('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>