在 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

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

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

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

Answer 1

它在 Chrome 中工作正常，但在 Firefox 中不起作用。要使滚动在 Firefox 中正常工作，您必须在以下位置使用scrollTophtml：

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

而且它main不会占用您在 Firefox 中分配给它的 800px。更改flex: 1为flex: 1 1 800px跨浏览器相同的行为。

请参阅下面的演示：

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

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