The same old issue, .scrollTop(0) not working in Chrome & Safari

Question

First, let me point out, i've googled and even looked at answers on here like this and this, however, I'm still yet to find a working solution for my case.

I've designed a page that has several fixed elements covering the page and makes of html5/css3 to create a clean "mask" over the main document, thus allowing the body scroll bar to still scroll the underlying content.

In firefox and ie (bleh), scrollTop(0) is working perfect. However, as stated by the question, not so much in my fav browsers.

Something I've made note of is to call the following both before the scrollTo event and after

$("body,html,document").each(function(){ console.log($(this).scrollTop()); });

The results were not pleasing, it tells me that the scrolltop is already 0 and thus is not even attempting a scrollTop, or at least that's what I "think" thus far.

And before you ask, i made that console call on each of those 3 items as the document scrolltop should be covered within one of those items (i would think body, but like in ie you have to call html too)

Any takers on ideas?

FYI, it may be a css oddity (tho how it works in IE and not chrome i really cant understand) but I have already tried the following with negative results:

$(window).scrollTop(0);
$(document).scrollTop(0);
$("html").scrollTop(0);
$("body").scrollTop(0);
window.scroll(0,0);
$("body,html,document").scrollTop(0);
$("body,html").scrollTop(0);

Which I suppose extends my question, is this a css issue? I dont have an outside link and the code is too long (made with CI view Partials) to post all of it, but to CLARIFY what i've done:

• Fixed header, footer, and sidebar leaving content to scroll with documet scrollbar
• very little javascript or jquery implemented thus far, almost 0 custom css outside of fixing position of presaid elements
• the "content" is ajax'd in using jQuery's .load function based on list items clicked in sidebar navigator

temp Fiddle no longer up

Bohunk

An atomic jsfiddle reproduction would be helpful in assisting you. – Tetreault

I added a fiddle, I know the code might be bleh as I'm just trying to construct a demo at this point, but please feel free to point out an error or even criticize, just be kind enough to add support for possible criticisms – Bohunk

could anyone please help on related question here? #58653546 – Marentic

Answer 1

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

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

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

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

Tetreault

The answer seems to have suffered from link rot. Please fix the jsfiddle. – Pheasant

this css turned my code from partial not working, to completly not working – Meilhac

Thank you so much! completely solved my problems just by removing html { overflow: hidden; } – Epistemic

For me the problem was a css library having html, body { height: 100%;} – Heppman

could you please help on related question please? #58653546 – Marentic

Answer 2

I had the same problem. If I put

$(window).scrollTop(0);

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

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

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

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

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

Brundisium

This worked for me. Thanks. I was running into the issue in Firefox when other browsers behaved as expected. I thought I was going crazy. Prior to implementing this solution I was stepping through debugger and when I did that it actually worked fine when I stepped over the line of code, but when I was just running the code live it never worked. – Ratal

Worked for me!! – Willumsen

could you please help on related question please? #58653546 – Marentic

Answer 3

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

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

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

Altitude

This is a great answer and works for List-boxes as well in Chrome – Binette

Answer 4

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

$(window).scrollTop(0)

Megaton

That's nice, but its not working in mine. As I mentioned, it worked in IE, but not chrome – Bohunk

I did test in Chrome, so there is something else going on here. As @Tetreault suggests, please include a jsfidddle rep. – Megaton

Answer 5

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

Emission

Answer 6

Also check out this answer: scrolltop broken on android - it seems to work best when overflow is set to visible and position to relative - but ymmv. You 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); 
}

Tomasatomasina

Answer 7

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

Pursley

Answer 8

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
            );
        }
    };
})();

Beavers

Answer 9

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

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

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

Teasel

Answer 10

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

Hoot

When answering an older question it is helpful to explain how your answer differs from existing answers and what useful information it adds. With version specific issues it is also useful if you can address if your answer is valid for current versions of Chrome and Safari, and also if it works for the versions that were in place at the time the question was asked. – Anting

Answer 11

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

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

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

Then I tried to use some trick:

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

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

I hope this helps. Thanks.

Necrotomy

Answer 12

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

Parkinson

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Courtier

Answer 13

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

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

Helban