javascript - 溢出 : auto on html, 正文中断 jQuery .animate 滚动到顶部？

Question

我的网页底部有一个按钮，单击该按钮会滚动回页面顶部。这非常有效，可以在我的 demo here 中看到.

我的网站抽屉有另一个问题，当抽屉打开时整个页面一直跳起来 - 为了解决这个问题，我需要将 overflow:auto; 应用到 html ,body 并解决了这个问题。

但是在这个过程中它阻止了我的返回顶部按钮的工作。我想知道是否有人可以解释原因，或者是否有一个简单的解决方案，我就是想不通？

要查看我的问题，只需在我的演示 CSS 中取消注释 overflow:auto。

更新

多亏了下面的一些建议，将 overflow:auto 应用于 body 而不是 html 解决了除桌面 Safari 之外的所有问题 - 任何人知道如何解决这个问题吗？

var offset = 300,
  scroll_top_duration = 700,
  $back_to_top = $('.top');

// Smooth scroll to top
$back_to_top.on('click', function(event) {
    event.preventDefault();
    $('body,html').animate({
      scrollTop: 0,
    }, scroll_top_duration
  );
});

Answer 1

它似乎不喜欢在 html 元素上溢出。这是一个 fiddle : http://jsfiddle.net/330zyny7/2/

将溢出移动到正文中修复它。

var offset = 300,
scroll_top_duration = 700,
$back_to_top = $('.top');

// Smooth scroll to top
$back_to_top.on('click', function(event) {
  event.preventDefault();
  alert();
  $('body,html').animate(
{scrollTop: 0, }, 
scroll_top_duration
  );
});

html, body {
  padding: 0;
  margin: 0;
  height: 100%;
  -webkit-overflow-scrolling: touch;
}

body{
  overflow:auto; 
}

.page-wrapper {
  position: relative;
  height: 1000px;
}

h3 {
  position: absolute;
  bottom: 0;
}

<div class="page-wrapper">
  <p>Top - scroll to the bottom to click 'back to top'</p>
  <h3>
<a href="#" class="top">Back to top</a>
  </h3>
</div>