Mobile Safari: why is window.scrollTo(0, 0) not scrolling to (0, 0)?

Question

I've built a small single-page web app using Bootstrap 3, Sammy.js and Knockout 3. I'm finding that when the page is scrolled down, I'm unable to get window.scrollTo(0, 0) to work on Mobile Safari when I also change location.hash - specifically on iOS 7 on an iPhone 5C (likely happens on other iPhone models though).

When I try something like this:

self.changeState = function() {
    self.state(State.NewState);
    location.hash = 'somevalue';
    window.scrollTo(0, 0);
};

The page will scroll almost all the way to the top - it will usually be scrolled to Y = 12 or 13. It will never scroll to 0 if I call window.scrollTo(0, 0); when the user is scrolled to the bottom of the page (and the content is sufficiently high to warrant a scroll to top).

I've tried various StackOverflow answers/suggestions (e.g. The same old issue, .scrollTop(0) not working in Chrome & Safari); the usual remedies (wrap in a setTimeout) do not change the behavior - it still scrolls to somewhere near the top of the page, but not quite to the top.

Header style:

<div class="navbar navbar-default navbar-inverse navbar-static-top">

Viewport settings:

<meta name="viewport" 
      content="width=device-width, 
               height=device-height, 
               initial-scale=1.0, 
               maximum-scale=1.0, 
               target-densityDpi=device-dpi" />

Scroll attempts:

self.changeState = function() {
    self.state(State.NewState);
    location.hash = 'somevalue';
    window.scrollTo(0, 0);
};

and:

self.changeState = function() {
    self.state(State.NewState);
    location.hash = 'somevalue';
    window.setTimeout(function() {
        window.scrollTo(0, 0);
    }, 0);
};

I've dug into this with the Safari Web Inspector, and nothing seems out of place as far as the structure of the page. I'm just not sure what to look for here - any ideas?

Edit:

So far, I have not been able to reproduce this outside of my app's code. I'm trying to get this to break in a JSFiddle - in this one, it works correctly (e.g., it scrolls to 0,0 as it should): http://jsfiddle.net/rringham/n9evU/24/show.

Photoreconnaissance

Answer 1

This was not working for me in Chrome on iOS either, in 2023. It was working with Safari. I found I needed both the delay via setTimeout and a -1 instead of a 0 on the vertical parameter. Like so:

setTimeout(() => {

    window.scroll({ top: -1, left: 0, behavior: "smooth" });

}, 10); 

Hope this helps someone else in my boat, as I spent a few hours on it.

p.s. I too was fiddling with window.location.hash -- although I didn't look into the possible connection with that by temporarily removing that code... Strange bug. 0 should mean 0!

Heterophyllous

Thank you, this worked for me when i was having an issue forcing a scroll up on mobile. This was a nice way to refactor some of what was mentioned above in different answers. – Chivers

Answer 2

One trick to achieve this:

window.scrollTo(0, 0);
setTimeout(() => { window.scrollTo(0, 0); }, 100);

Fasta

it's working well but do you know why we need run this function into setTimeOut? – Deniable

This worked for me when i could not force a scroll up on mobile, but would like to know how it works as well. – Chivers

Answer 3

I managed to recreate this issue by using height: 100vh or min-height: 100vh on elements. I changed my CSS to use 100% instead (which is a bit of a pain) and the problem disappeared.

Essayist

Answer 4

Try setting scrollTo(-n, 0); "n" being any number lower than 0

Stauder

Answer 5

In my case, same issue, but it were coming from the fact I was in an iframe. So doing window.top.scrollTo(0,0) made it!!!!

Shoop