溢出：自动在HTML上，身体破坏jQuery .animate滚动到顶部？

我的网页底部有一个按钮，点击后会滚动回到页面顶部。 这很完美，可以在我的演示中看到 。

我的网站上有一个抽屉的另一个问题，当抽屉被打开时整个页面不断跳起来 – 为了解决这个问题我需要应用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; } 

 
 
Top - scroll to the bottom to click 'back to top'
 
 Back to top