Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery animating scroll top to 0 not working on Windows Phone

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.

like image 702
topherg Avatar asked May 21 '13 23:05

topherg


1 Answers

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.

like image 139
LocalPCGuy Avatar answered Sep 28 '22 05:09

LocalPCGuy