Magento Issue: One Page Checkout appearing to jump to the bottom of the page after address is entered

This is a recurring issue with Magento’s standard One Page Checkout. It most often occurs when the template has been updated to include lots of big fonts and padding around field elements (thanks designers).

What happens is that the address stage is a very tall container which then jumps to the much shorter Shipping Method stage and the height of the entire page is updated in the browser, while you user thinks they’re being pushed to the bottom of the page.

The easy fix is to tell prototype.js to jump to the top of the next stage rather than remaining at the fixed position on the page.

In your checkout/onepage.phtml add the following code directly after the var checkout = new Checkout() block.

checkout.gotoSection = function (section, reloadProgressBlock) {
            Checkout.prototype.gotoSection.call(
               this, 
               section, 
               reloadProgressBlock
            );
            $('opc-' + section).scrollTo();
        };