Question

When a user enters credit card details during the checkout process and clicks "Continue", the following review section is being displayed so far up the screen that the user then has to scroll up to see it - the bottom part of the review-buttons-container div (which contains the "Place Order" button) is all that can be seen unless you manually scroll up the page.

Is there any way to adjust the target/div that the process shows or scrolls to after hiding the opc-billing section?

Was it helpful?

Solution

To answer my own question for the benefit of others:

I added the following JavaScript to template/checkout/onepage.phtml:

if(Ajax.Responders){
    Ajax.Responders.register({
        onComplete: function(response){
            scrollTo(0,0);
        }
    });
}

So after each AJAX request/response that occurs for process the current section and advancing on to the next, it causes a scroll to the top left of the page. This mightn't be particularly elegant, but it gets the job done.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top