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: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: