At my job we have a one page site I created with AngularJS.
We're using the ui-router plugin (version 0.2.0).
Recently I've noticed that when moving from one state to another, the window isn't scrolled to the top.
I even tried to scroll it to the top manually using jQuery's scrollTop() function on every state change (using the $stateChangeSuccess event). But it didn't work.

So I started investigating, and I've noticed that scrollTop() is returning 0 for every element on the page.
Not only that, but when I print the window.scrollY to the console I get 0 (no matter where I'm at on the page). Not only in my code, but even if I just write it in the chrome dev tools console.

I've written several apps with AngularJS and ui-router, and it only happens in this particular one.

I've checked to see if I have overwritten the scrollTop() function or even the window.scrollY field, but haven't found anything.

I've tried using the ui-view with autoscroll="true" and autoscroll="false", but it didn't make a difference.

I also tried giving the html and the body elements height:100%, and I also tried it without. But nothing.

I really don't know what to do next.

I wasn't able to reproduce the problem, but if you think there is any code I should post here that could be of any help, I'll be glad to do that.

Thanks!

EDIT:

I've run this function on the console:

var l = $('*').length;
for(var i = 0; i < l; i++) {
    var elem = $('*:eq(' + i + ')');
    if(elem.scrollTop() > 0) {
        console.log(elem, elem.scrollTop());
    }
}

The function printed out only one element with it's top scroll.
The element is a wrapping div that holds the whole content and the main view (I have nested views in my app).
If I use scrollTop(0) on this element I get what I wanted, but it only deals with the symptom, and not the real problem.

At my job we have a one page site I created with AngularJS.
We're using the ui-router plugin (version 0.2.0).
Recently I've noticed that when moving from one state to another, the window isn't scrolled to the top.
I even tried to scroll it to the top manually using jQuery's scrollTop() function on every state change (using the $stateChangeSuccess event). But it didn't work.

So I started investigating, and I've noticed that scrollTop() is returning 0 for every element on the page.
Not only that, but when I print the window.scrollY to the console I get 0 (no matter where I'm at on the page). Not only in my code, but even if I just write it in the chrome dev tools console.

I've written several apps with AngularJS and ui-router, and it only happens in this particular one.

I've checked to see if I have overwritten the scrollTop() function or even the window.scrollY field, but haven't found anything.

I've tried using the ui-view with autoscroll="true" and autoscroll="false", but it didn't make a difference.

I also tried giving the html and the body elements height:100%, and I also tried it without. But nothing.

I really don't know what to do next.

I wasn't able to reproduce the problem, but if you think there is any code I should post here that could be of any help, I'll be glad to do that.

Thanks!

EDIT:

I've run this function on the console:

var l = $('*').length;
for(var i = 0; i < l; i++) {
    var elem = $('*:eq(' + i + ')');
    if(elem.scrollTop() > 0) {
        console.log(elem, elem.scrollTop());
    }
}

The function printed out only one element with it's top scroll.
The element is a wrapping div that holds the whole content and the main view (I have nested views in my app).
If I use scrollTop(0) on this element I get what I wanted, but it only deals with the symptom, and not the real problem.

• javascript
• jquery
• angularjs
• scroll
• angular-ui-router

• What gives you $(window).height(), expected result? – A. Wolff Commented Mar 4, 2014 at 13:39
• @A.Wolff Thanks for the ment! I actually get a varying value. I think it depends on the window size (with console open, or closed, etc...) – jonny bordo Commented Mar 4, 2014 at 13:52
• AFAIK, scrollTop would always returns 0 if none or not correct DOCTYPE is set on the page, but then still AFAIK, $(window).height() should always returns 0. Seems like then not your issue here. – A. Wolff Commented Mar 4, 2014 at 13:57
• I didn't know that, it's good to know, thanks! However, I am using the html5 standard <!DOCTYPE html>. – jonny bordo Commented Mar 4, 2014 at 14:01
• Based on your edit: IS there even a problem? It seems to me you get the correct results: your one container that can scroll/is scrolled (ok this is an assumption) is also the one that correctly returns scrollTop() != 0. I would suggest your only 'problem' is that apparently Angular tries to put scrollTop(0) on your document, which is kind of an assumption, since having a content container like yours is not unmon. – Hans Roerdinkholder Commented Mar 4, 2014 at 14:10

3 Answers 3

As @Hans mented, there wasn't actually a problem. I had a wrapping element, that was positioned absolute with:

top:0;
bottom:0;
left:0;
right:0;
overflow:auto

So The window's scrollTop was always 0, and the scrollbar actually belonged to the wrapping element.

Since I could't get rid of the wrapping element's positioning, I used ui-router's $stateChangeSuccess event, and manually scrolled the wrapping element to the top.

From the console, try

console.log(frames)
console.log(frames.top.scrollY)

If window.scrollY is showing 0, then the reference frame must not be the window. Do you have any iframes on the page? console.log of frames will show the list of frames on the page.
Hope that helps.

My code is happend this problem too, and I found a body{overflow: hidden;} is the reason, I remove "overflow: hidden;" and all is well.