One Page Checkout scrolling to the bottom of screen on next

On my magento site, I am getting a strange behaviour in onepagecheckout that I’d like to fix. Basically, on Step 2, after entering all the data required and I click on the continue button, the page automatically scrolls down to the bottom of the screen so instead of seeing the shipping option, you see the footer and have to scroll up to choose the shipping. So my question is how can I keep the forms in onepagecheckout “focused” so that the screen stays on it when the continue/next button is clicked. I’ve tried changing the shipping.save() function on the onclick event to something like:

function test() {
           shipping.save();
           document.getElementById('checkoutSteps').scrollIntoView();
}

But that clearly did not work. So how can I set the page to stay on the onepagecheckout when next is clicked?

Sorry I forgot to add, the button already has an existing click event. Basically, the button looks like this:

<button type="button" class="button" title="<?php echo $this->__('Continue') ?>" onclick="shipping.save()"><span><span><?php echo $this->__('Continue') ?></span></span></button>

I’m not sure if this matters but whenever I try to add a second function onclick (onclick=”shipping.save(); testFunction();”), the second function is automatically removed.

Answer

I encountered the same problem. In your checkout/onepage.phtml, add this code:

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

below

var checkout = new Checkout(....);

Hope this help.

Advertisement

Answer