Overflow: auto on html,body breaks jQuery .animate scroll to top?

Question

I have a button at the bottom of my webpage that when clicked scrolls back to the top of the page. This works perfectly and can be seen in my demo here .

I had another issue with a drawer in my site where the entire page kept jumping up when the drawer was opened - to solve this i needed to apply overflow:auto; to the html,body and that fixed the issue.

However in the process it stopped my back to top button from working. I wondered if anyone might be able to explain why or if there is an easy solution to this, I just can't figure it out?

To see my issue simply uncomment the overflow:auto in my demo CSS.

UPDATE

Thanks to a few suggestions below applying overflow:auto just to the body NOT html fixes the issue on everything except desktop Safari - anyone got any clue how to remedy this?

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

It seems that it doesn't like having overflow on the html element. Here's a fiddle: http://jsfiddle.net/330zyny7/2/

Moving the overflow to the body fixed it.

 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>