Home » Php » javascript – One Page Checkout scrolling to the bottom of screen on next

javascript – One Page Checkout scrolling to the bottom of screen on next

Posted by: admin July 12, 2020 Leave a comment

Questions:

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.

How to&Answers:

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.

Answer:

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

Answer:

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.