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

크롬에서는 잘 작동하지만 Firefox에서는 작동하지 않습니다. 스크롤 파이어 폭스에서 작동하려면 html에 scrollTop을 사용해야합니다

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

는 또한 main는 파이어 폭스에 할당 한 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>