Troubleshooting: Magento checkout page keeps scrolling to the top

We are experiencing an issue where, during the one page checkout process, the next step is not automatically scrolling to the top of the page when it loads.

After a user fills out all their billing information and clicks continue, the next step appears halfway down the page, based on the previous step's scroll position.

I would like each step in the one page checkout to always begin at the top of the page.

Currently, this portion of code exists within opcheckout.js:

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

However, this solution doesn't work well with our fixed header.
Does anyone know how I can modify this code to ensure it scrolls to the absolute top of the page?

javascriptjqueryhtmlcssmagento

Answer №1

UPDATED

I am currently utilizing Magento 1.9.1.1, and here is the content of the opcheckout_rwd.js file located in skin/frontend/rwd/default/js:

/**
 * Magento
 *
 * NOTICE OF LICENSE
 *
 * This source file is governed by the Academic Free License (AFL 3.0)
 * which is included with this package in the LICENSE_AFL.txt file.
 * It can also be accessed online at:
 * http://opensource.org/licenses/afl-3.0.php
 * If you have not received a copy of the license or are unable to obtain it
 * through the internet, please contact us via email
 * at <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7a1613191f14091f3a171b1d1f140e1554191517">[email protected]</a> so we can provide you with a copy promptly.
 *
 * DISCLAIMER
 *
 * Do not modify or add to this file if you plan on upgrading Magento
 * to newer versions in the future. For customization needs,
 * please visit http://www.magento.com for further instructions.
 *
 * @category    design
 * @package     rwd_default
 * @copyright   Copyright (c) 2006-2014 X.commerce, Inc. (http://www.magento.com)
 * @license     http://opensource.org/licenses/afl-3.0.php  Academic Free License (AFL 3.0)
 */

Checkout.prototype.gotoSection = function (section, reloadProgressBlock) {
    // Adds class to style page to only display "Checkout Method" step
    if ((this.currentStep == 'login' || this.currentStep == 'billing') && section == 'billing') {
        $j('body').addClass('opc-has-progressed-from-login');
    }

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

    // Scrolls viewport to top of checkout steps for smaller screens
    if (Modernizr.mq('(max-width: ' + bp.xsmall + 'px)')) {
        $j('html,body').animate({scrollTop: $j('#checkoutSteps').offset().top}, 800);
    }

    if (!reloadProgressBlock) {
        this.resetPreviousSteps();
    }
}

I do not encounter the issue you mentioned. Therefore, I recommend switching to the rwd package (the base package since Magento 1.9.1). You can initiate from this package and develop a new theme.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encircling a particular group of cells with a border

I have completed the component with a table layout. My current challenge is figuring out how to surround a range of selected cells with a border, similar to the first cell in the group shown below: https://i.stack.imgur.com/5Euht.png I attempted using d ...

javascripthtmlcss

Struggling with ensuring that Angular-JS pauses and waits for an asynchronous call to complete before moving on

Understanding the use of promises in Angular for handling async operations is crucial, but I'm struggling to implement it effectively in this scenario. function fetchLineGraphData(promises){ var dataPoints = []; for (var i = 0; i < promise ...

javascriptajaxangularjs

Challenge in WordPress Development

As a beginner in website building, I am looking to customize the background of my pages with a solid color. The current SKT Full Width theme I am using has an opaque background which is causing the text on my slider to blend in and not look appealing. All ...

javascriptjqueryhtmlcsswordpress

Cookie set upon clicking a particular element exclusively

Looking to toggle a class when clicking an element and preserve it post page load using jQuery or JavaScript. Here's what I currently have, successfully adding the class upon click but not retaining it after reload: jQuery("a.action.towishlist").clic ...

javascriptjquerycookies

Styling radio buttons with customized CSS borders

I'm attempting to style some radio buttons with a bold red border, but I'm having trouble getting it to display correctly in the latest versions of Firefox and Chrome. It works fine in IE9/IE8. For each input element that is required on my form, ...

css

Ways to position a div at the center of a page

I've encountered a challenge while creating a mobile website. Within the main div, there are three nested divs. Initially, I aimed for left alignment but now desire to center-align these three divs on the page. Essentially, if the device screen is wid ...

csshtmlcenteralignment

Efficient method to update the state of a result in React JS using hooks within an asynchronous function and useState

How can I ensure the state is updated correctly after using setState? I found a code example similar to mine at Why react hook value is not updated in async function?, but it doesn't provide a solution to the problem. Any help would be greatly appreci ...

javascriptreactjs

Display a button only when hovering over it

Seeking assistance for a simple task that is eluding me at the moment. I am currently using scss and trying to make a button only appear when hovered over. The button is hidden in the code snippet below, nested within a block alongside some svgs. Any hel ...

javascripthtmlangularsass

I require the use of XSL to verify the href value of links and modify it if needed, without altering any other attributes

The code mentioned above performs the following tasks: Locates links Checks if it is a fully pathed link or an email link If yes, no action is taken. If no, it checks for a # to determine if it is an anchor If yes, no action is taken. If no, it adds the d ...

htmlxslt

Can someone show me the steps for reattaching an event to a newly loaded DOM element using ajax?

I am encountering an issue with my click callback function, as it only works once. I suspect this may be due to the fact that parts of my page are being refreshed through ajax actions after the first callback. How can I reattach the event to the newly load ...

jqueryajaxevent-handling

How the React Component Class Executes OnChange Event in a Closure

When working on my React code, I found myself creating a closure by calling "onChange." class CityInput extends React.Component { constructor( props ){ super( props ); this.state = { city : "", country : "" ...

javascriptclassreactjsclosures

Reacting to the dynamic removal of spaces

Is there a way to dynamically remove the space between removed chips and older chips in Material-UI when deleting one of them? <div className="row contactsContainer"> {contacts.map((contac ...

cssreactjstypescriptdynamicmaterial-ui

AJAX Post Request Function without Form That Does Not Reset

I am currently struggling with understanding the Ajax POST method. I am attempting to make an API request, and since the response has similar parameters, I decided to create a global function that can be used by other HTML/JS pages. However, I am aware tha ...

javascripthtmljqueryajax

Customize div styles according to the website domain

I want to dynamically change the header of my website based on whether it is in dev QA or production environment. Below is the HTML code: <div id="wrapper"> <form id="form1" runat="server"> <div class="wrapper"> <div> ...

javascriptcssasp.net

Adding the same block of code to an event in Node.js: Best practices

My preferred tech stack for real-time user synchronization includes Node.Js with Express and Express HBS (Handlebars), as well as Socket.IO. For example, when creating a web chat application, I emit an event from the client to the server each time a user ...

javascriptnode.jsexpresstemplateshandlebars.js

How can a false validation be conducted on knockout js?

Using knockout js, I have an input type checkbox and I want to trigger the "not true" action when this checkbox is selected. Here's what I have attempted: <input type="checkbox" data-bind="checked: !IsVisible"/> Unfortunately, this code isn&ap ...

javascriptjqueryknockout.jschecked

Tips for utilizing JSON.parse

Within my ajax request, I am encountering the following code: 403: function(jqXHR) { var error = jqXHR.responseText; console.log(error); } When this error occurs, a message is displayed in the console: Htt ...

javascriptjsonajaxnode.jsexpress

Do not incorporate a div in the overlay

I have an image inside a container. When hovering over the image/container, overlay information is displayed (which is currently working correctly). The overlay should cover the entire container (the grey part) where the image is located. The product-tit ...

htmlcss

Spotlight a newly generated element produced by the*ngFor directive within Angular 2

In my application, I have a collection of words that are displayed or hidden using *ngFor based on their 'hidden' property. You can view the example on Plunker. The issue arises when the word list becomes extensive, making it challenging to ide ...

cssangulartypescriptngfor

passport not initializing session with requests

I am currently utilizing passportJS for managing login and persistent sessions on the server backend. While everything functions properly when sending requests from the server frontend (a webpage that I didn't create and lack sufficient knowledge to ...

javascriptnode.jssessionrequestpassport.js