One Page Checkout scrolling to the bottom of screen on next

Question

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.

Wooley

Answer 1

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.

Magner

Works flawlessly in CE 1.9.1 with half a million customization. – Latitudinarian

@Willaim Tran: I have the same issue and tried your solution. It actually works but halfway. Meaning, it is helping to show half the shipping method block and not complete from the place where shipping method block starts. Any idea on this? – Dominique

@Willaim Tran: Hey, I just tried a bit more on your solution and it worked well for me. Here is what I added more with your solution: checkout.gotoSection = function (section, reloadProgressBlock) { Checkout.prototype.gotoSection.call(this, section, reloadProgressBlock); jQuery('html, body').animate({ scrollTop:jQuery('#opc-'+section).offset().top - 75 }, 500); }; This helps me to get the block inplace. – Dominique

Answer 2

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#elementtoScrollToID").offset().top
    }, 2000);
});

Billet

thanks but this didn't work. And also, using the click function of jquery disabled the onclick function of the button which is also important. – Wooley

Answer 3

In addition to Williams answer:

Most custom templates do not "rewrite" base/default/template/checkout/onepage.phtml so it would be some overhead to copy this file to your template just to add this ...

You still can use this with adding a new template file:

For your templates layout local.xml add this:

<checkout_onepage_index>
    <reference name="before_body_end">
        <block type="core/template" name="checkout.scroll" as="checkout.scroll">
            <action method="setTemplate">
                <template>checkout/onepage/scroll.phtml</template>
            </action>
        </block>
    </reference>
</checkout_onepage_index>

Create .../template/checkout/onepage/scroll.phtml with this content:

<script type="text/javascript">
//<![CDATA[
    document.observe("dom:loaded", function() {
        if (typeof checkout !== 'undefined') {
            checkout.gotoSection = function (section, reloadProgressBlock) {
                Checkout.prototype.gotoSection.call(this, section, reloadProgressBlock);
                $('opc-' + section).scrollTo();
            };
        }
    });
//]]>
</script>

Same result, just without editing base template files.

Ignorant

Answer 4

This can also help, I simply add this code in my checkout.gotoSection and it worked fine.

 gotoSection: function (section) {
    section = $('#opc-' + section);
    section.addClass('allow');

    // added this line
    section.get(0).scrollIntoView();
},

Beulabeulah