溢出：在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>