溢出：在html上自动显示，正文中断了jQuery .animate滚动到顶部？

Question

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

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

但是，在此过程中，我的后退按钮停止工作。 我想知道是否有人可以解释原因，或者是否有简单的解决方案，我只是想不通？

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

UPDATE

多亏了以下一些将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元素上溢出。 这是一个小提琴： 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>