[ACCEPTED]-The same old issue, .scrollTop(0) not working in Chrome & Safari-scrolltop

I had the same problem. If I put

$(window).scrollTop(0);

in the 11 document ready handler, it didn't work; but 10 if I test it in the javascript console panel 9 of Chrome developer toolkit, it worked! The 8 only difference was the execution time of 7 the script. So I tried

window.setTimeout(function() {
    $(window).scrollTop(0); 
}, 0);

and it worked. Setting 6 a delay greater than 0 is not neccesary, although 5 that also worked. It's not jQuery's fault, because 4 it is the same with

window.scrollTo(0, 0);  window.scroll(0, 0);

So the reason might 3 be the browser populates the window.pageYOffset 2 property after it renders the page and executes 1 the js.

For people that need the overflow settings, the 2 workaround is to use an animation like this.

    $('#element_id').stop().animate({ scrollTop: 0 }, 500);

This 1 seems to behave better than .scrollTop(0).

The problem is with CSS. In particular, the 5 rules I've included below.

html, body {
    overflow-x: hidden;
    overflow-y: auto;
}

Though these rules 4 are obviously related to scrollbars, I'm 3 not sure why they are causing the behavior 2 you are observing. But if you remove them, it 1 should solve your problem.

See: http://jsfiddle.net/jNWUm/23/.

I just tested the following in IE8 and Chrome 1 and both work:

$(window).scrollTop(0)

I had a same problem with scrolling in chrome. Reason 1 was height:100% style in body and html. See this answer

Also check out this answer: scrolltop broken on android - it seems 3 to work best when overflow is set to visible 2 and position to relative - but ymmv. You 1 might find these useful...

function repeatMeOnMouseDown() // for smooth scrolling
{
    var $newTop = $('#element_id').position().top + ($goingUp ? -20 : 20);
    $('#element_id').animate({top: $newTop}, 20, repeatMeOnMouseDown); 
}

// these should work
$('#element_id').animate({top: -200}, 200); // scroll down
$('#element_id').animate({top: 0}, 200); // scroll back up

// DON'T DO THIS - Offsets don't work with top like they do with scrollTop 
$('#element_id').animate({top: ("-= " + 200)}, 200);

// and when you get tired of fighting to do smooth animation 
// on different browsers (some buggy!), just use css and move on
function singleClick($goingUp)
{
   var $newTop = $('#element_id').position().top + ($goingUp ? -200 : 200);
    $('#element_id').css({top: $newTop}, 20); 
}

FYI, if not in top body, i.e. in an iframe, just 1 try window.top.scrollTo(0,0);

This code was tested in chrome. http://jsfiddle.net/wmo3o5m8/1/

(function () {
    var down = false, downX, downY;
    document.onmousedown = function (e) {
        downX = e.pageX;
        downY = e.pageY;
        down = true;
    };
    document.onmouseup = function () { down = false; };
    document.onmousemove = function (e) {
        if (down) {
            window.scrollTo(
                window.scrollX + downX - e.pageX,
                window.scrollY + downY - e.pageY
            );
        }
    };
})();

0

This is the normal behaviour when in your 10 css you are declaring overflow: hidden for html or body dom elements, as 9 you can read in the jQuery API docs:

The vertical scroll 8 position is the same as the number of pixels 7 that are hidden from view above the scrollable 6 area. If the scroll bar is at the very 5 top, or if the element is not scrollable, this 4 number will be 0.

With overflow: hidden the scroll bar 3 is not visible hence element not scrollable, so the 2 number will be 0 in every (I wonder) browser 1 you will use.

$('#element-id').prop('scrollTop', 0); should also do the trick.

0

I had this issue on MacOS. I tried to put:

$(window).scrollTop(0);
document.body.scrollTop = document.documentElement.scrollTop = 0;

in 7 the $(window).load and it still wasn't working.

Then I 6 tried to use some trick:

$('body')
  .css('position', 'fixed')
  .delay(200)
  .promise()
  .done(function() {
    $('body').css('position', 'relative');
  });

and it worked fine! The 5 position fixed kind of detaches the <body> from the <html> which 4 effectively sets the window scroll position 3 to zero. Then with a delay of 200 milliseconds 2 (just to be on the safer side), I put the 1 position: relative back.

I hope this helps. Thanks.

$('yourElement').animate({ scrollTop: 0 1 })

In Chrome it's now possible to use both 8 element.scroll(0,0) and window.scroll(0,0) for a scrollable element (having a 7 content larger than its size and some element {overflow: auto} in 6 CSS), or for the entire page, as shown in 5 this jsfiddle here.

To improve the general UX, it's 4 recommended to also use element {scroll-behavior: smooth;} too -- this option 3 being an alternative to using animation 2 -- as mentioned by a previous answer (or 1 directly the html {scroll-behavior: smooth;} instead).