Question

导航，主页，页脚，有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(){
	$('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中分配给它的800px。对于跨浏览器的相同行为，将flex: 1更改为flex: 1 1 800px。

见下面的演示：

＆＃13;

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

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

在FlexBox中使用ScrollTop不起作用

1 个答案: