jQuery animating scroll top to 0 not working on Windows Phone

Question

I have written a website which has a function that scrolls the users view to the top of the page. The call in question is:

$('html,body').animate({scrollTop:0}, 150, 'swing');

This works fine on all desktop browsers, but on Windows Phone, it only scrolls the user up about 180 pixels, then stops. I have tried replacing the function with:

$('html,body').scrollTop(0);

It snaps to the top on desktops, but it scrolls to the top on the phone. I believe this need for Internet Explorer Mobile to try to smoothly animate the scrolling, and is causing the issue. If this is the case (or if not, could someone correct me), how can I override this function to get the animation to work?

EDIT

Although its not ideal, it does seem to work in a limited capacity, I have replaced the scroll code with this:

$('html,body').animate({scrollTop:0}, 150, 'swing', function() {
    $('html,body').scrollTop(0);
});

But it would be good to know if there is an option to disable the smooth scrolling in Mobile IE programatically.

Outsail

Answer 1

On Windows Phone 8, I am running into the same problem. I currently am doing the following hack, where it waits until the animation is "complete" and then executes a standard window.scrollTo to ensure that it is scrolled to the proper location.

scrollHmtlBody: function (scrollToTarget, duration) {
    $('html, body').animate({ scrollTop: scrollToTarget }, duration);

    // Windows Phone doesn't animate properly, 
    // this makes sure it scrolls to the appropriate position (eventually)
    setTimeout(function() { 
        window.scrollTo(0, scrollToTarget);
    }, duration + 75);
}

I am not happy with the result - it works, but because of the 75ms delay it has a hesitation before it "finishes" the scroll animation. With less of a delay, the Windows Phone apparently refuses to perform the scrollTo action (maybe it thinks it is currently "scrolling"?)

I may end up resorting to an if/else clause with device detection, but right now I am trying to find a better solution rather than going down that road.

Hexapody

yeah, thats similar to what I did in the end. Except, instead of having the setTimeout call outside of the .animate, it was part of the complete callback argument within .animate. Seems to work ok, but yes, it is annoying having the delay afterward. A device discovery program (server side) would be nice to include a different script, as long as all the window animation is handled in an independent script – Outsail

Yah, for some reason it would not work inside the callback on the emulator. Should have a real W8Phone by the end of the week to see if that makes a difference. – Hexapody

Sometimes, what I have found happens is that the animation starts, then it will just stop at a point. I think its because while its scrolling up, it gets interrupted, so it just stops instead. It might need a script to determine the number of pixels between where you currently are, where you are going to, then if the rate can be calculated (which shouldn't take too long), the time for WP to scroll can be determined. Then, with a little bit of padding (lets say 5ms) the scrollTo(0) can be called. Will have a little bit of a play. Enjoy your new phone – Outsail

Haha...I am very happy with my Android, the new phone is for our QA lab. I am probably going to look at just writing my own animation function that uses a combination of recursive calls and setTimeout to animate the scroll using window.scrollTo. Should work pretty much everywhere and provide the same experience, and don't think it'll take that long to do, it's a relatively simple recursive function. – Hexapody

I've found when on windows mobile it's easiest to detect the browser and just call window.scroll(0,0); the browser will animate the scrolling for you. – Scabious

Answer 2

None of these solution worked for me either on Windows Phone 7. What did work was to remove the animate() and rely simply on scrollTop on the html tag. Hope this helps someone.

This:

$('html').scrollTop(distance);

instead of:

$('html,body').animate({ scrollTop: distance }, 250);

Fructificative

Although that does work nicely, it does have the unfortunate side effect of removing any nice animation on devices that don't do the animation themselves (like Chrome on desktop) – Outsail

Answer 3

I ran into the same issue on my Windows Phone 8. In my case I needed to scroll the window to the bottom but on the phone it just wouldn't work.

In the end I used a combination of @topherg and @LocalPCGuy solutions with a slight variation to get the screen to the bottom.

Here's my code incase it helps someone else:

$("html, body").stop().animate({
    scrollTop: $("#last-message").offset().top
}, 2000, 'swing', function () {
    $("html, body").scrollTop($("#last-message").offset().top);
});

setTimeout(function () {
    window.scrollTo(0, document.body.scrollHeight);
}, 2075);

Where #last-message is the div I want to scroll to. It feels a little hacky, but so does Windows Phone :P

Infundibuliform

Answer 4

I solved it this way

The link: <a href="#about" data-target="about" class="scroll-to">About</a>

The anchor name #about makes it work on devices with smooth scrolling

        function scrollToElement(elementId) {
            var top = $("#" + elementId).offset().top;
            $('html,body').animate({ scrollTop: top }, 250);
        }

        $(".scroll-to").click(function () {
            scrollToElement($(this).data("target"));
        });

Outstretched

made no difference really. I implemented that onto a test page, but it would only go a short distance, then stop – Outsail