Checkout – One Page Checkout Starts at Top of Screen

checkoutonepage-checkoutonestepcheckout

I use a vertical one page checkout methode, so that the steps are taken vertical.

When the first billing page is filled in, I want to begin all next steps at the top of the page.

I edit skin/frontend/base/default/js/opcheckout.js and replaced the gotoSection as follow.

Default:

gotoSection: function (section, reloadProgressBlock) {

    if (reloadProgressBlock) {
        this.reloadProgressBlock(this.currentStep);
    }
    this.currentStep = section;
    var sectionElement = $('opc-' + section);
    sectionElement.addClassName('allow');
    this.accordion.openSection('opc-' + section);
    if(!reloadProgressBlock) {
        this.resetPreviousSteps();
    }
},

Replaced with:

gotoSection: function(section, reloadProgressBlock) {

    if (reloadProgressBlock) {
        this.reloadProgressBlock(this.currentStep);
    }
    this.currentStep = section;
    var sectionElement = $('opc-'+section);
    sectionElement.addClassName('allow');
    this.accordion.openSection('opc-'+section);
    if(!reloadProgressBlock) {
        this.resetPreviousSteps();
    }
    jQuery("html, body").delay(10).animate({scrollTop: jQuery("#opc-"+section).offset().top }, 50);
},

That does work for the scroll, but it begin to early on the page and I need to edit it because we have a fixed header.

How can I edit this code, so that it is placed correctly with our fixed header?

Best Answer

In the last line, I guess you have to substract the fixed header's height from the scrolling position where you want to go.

So, assuming your header is something like <div id="header">...</div>, change the line to this:

jQuery("html, body").delay(10).animate({scrollTop: (jQuery("#opc-"+section).offset().top - jQuery('#header').height()) }, 50);

Note the jQuery('#header').height() I have added.

UPDATE

If you need to scroll further, you can simply substract a higher number from the target position. I put the target position in a variable for clarification:

// calculate the offset, note the new "- 50" at the end
var targetOffset = jQuery("#opc-"+section).offset().top
                       - jQuery('#header').height() - 50;
jQuery("html, body").delay(10).animate({scrollTop: targetOffset}, 50);
Related Topic