How to scrollTop when html, body is set to height: 100%?

Question

The following won\'t work unless I remove height: 100% from body and html. However, i need that style as I am using it for other elements on the page.

<

Answer 1

I had the same problem with body { height: 100%; } and scrollTop(0).

Since I was not able to change html/css for different reasons, workaround was to remove height before scrollTop, and then revert to initial state.

// Change height:100% into auto
$('body').css('height', 'auto');
// Successfully scroll back to top
$('body').scrollTop(0);
// Remove javascript added styles
$('body').css('height', '');

Answer 2

Got the issue, thanks to comments I noticed I had body: overflow-x:hidden which means scrollTop isn't working when we are using overflow on body, html

Answer 3

$(document).on('click', '.action', function() {
    $('html, body').css({height: 'auto'}).animate({
        scrollTop: $("#container").offset().top
    }, 500);
});

Answer 4

This worked for me:

$("#scrollTop").on("click",function(e){
  $('html,body').animate({scrollTop: 0}, 'slow');
});

http://jsfiddle.net/fvuy6/41/

Answer 5

@Andrew Tibbetts: your question why does setting overflow: hidden prevent scrolltop.

As per my understanding, when we say overflow hidden, we are saying, we do not want to show the extra part, i.e please hide the extra part

So we do not want to scroll, that means scrolltop will always remain 0

since scrolltop, is how much we have scrolled upwards.

Answer 6

If you can just use min-height, it won't break the scroll functions. (tested in Chrome only)

body, html {
    min-height: 100%;
}