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);
})
但是页面滚动动画不工作
$('a').click(function(){
$('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>
最佳答案
它在 Chrome 中工作正常,但在 Firefox 中不工作。要在 Firefox 中使用滚动,您必须在 html
上使用 scrollTop:
$('body,html').animate({
scrollTop: 0
}, 1000);
main
也不会占用您在 Firefox 中分配给它的 800px。将 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>
关于jquery - 在 FlexBox 中使用 ScrollTop 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46503367/