Scroll Webpage to Top on Mobile Device when Rotated

Question

I am having an issue where when rotating my webpage from portrait to landscape (on an iOS device for example — iPhone5), the landscape view is starts at about 50px from the top of the page. Rotating back displays the portrait view with no issues.

Here are screenshots that show the issue:

Portrait (correct):

enter image description here

Landscape after rotation (incorrect):

enter image description here

Lanscape how it should appear:

enter image description here

Here is the link itself if you wanted to check it on a device:

http://bit.ly/1ukGNbB

You might get it right from this post http://stackoverflow.com/questions/2740857/ipad-doesnt-trigger-resize-event-going-from-vertical-to-horizontal and then you cna trigger maybe a scrolltop. — Medda86, May 04 '14 at 02:39

score 3 · Accepted Answer · answered May 06 '14 at 00:33

After some digging, here is the code that will allow for a scroll to top when rotating to a landscape view on mobile device:

window.onorientationchange = function () {

    var orientation = window.orientation;

    // Look at the value of window.orientation:

    if (orientation === 0) {

        // device is in Portrait mode.

    } else if (orientation === 90) {

        // device is in Landscape mode. The screen is turned to the left.

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

    } else if (orientation === -90) {

        // device is in Landscape mode. The screen is turned to the right.

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

    }

};

Scroll Webpage to Top on Mobile Device when Rotated

1 Answers1