How to make the check-out steps land at the top of the screen as oppose to closer to the bottom where people have to use the scroll bar to scroll up

Question

Magento 1.9.1
Porto theme

I had this problem for a long time. I tried to fix it before but no luck yet...Apparently, this is not just my problem but many people are experiencing this very same issue. The problem is that some customers are having problems seeing the top of the page when moving forward in the check-out process and they have to scroll up to get to the relevant information on the page. I suspect this happens if they scroll down on the previous step for some reason then when they move to the next step - the scroller bar remains where it was on the previous step....Is there any way to fix that?

EDITED on May 7th, 2018:

I am still experiencing this issue. It is a serious problem for me because customers abandon sales when they get to 4-Payment Information. The screen scrolls all the way down on this step of the check-out (perhaps because I have a few different options in 3-Shipping Method and also a Delivery Comments section and Gift Options section there). Customers then do not see the Payment options at all. I've tried some of the steps here but I was not able to fix this problem:

Product pages load at the bottom of the screen

---

I've tried to follow these suggestions but they did not work either:

https://minhducnho.wordpress.com/2015/12/23/fix-one-page-checkout-scrolling-to-the-footer-bottom-of-screen-on-next-step/comment-page-1/#comment-86

I've put that code in the "onepage.phtml" file in:

/public_html/app/design/frontend/base/default/template/checkout

(it just shows me the steps to go through 1, 2, 3....etc but does not open step #1 automatically and it cannot even be opened by clicking on it)

---

Just to clarify browser compatibility - this happens on all the browsers I've tested - Chrome, Opera and IE.

---

The solution that worked for me is the one from Chirag Rajput:

I've put this code:

<script type="text/javascript">
jQuery(window).bind("load", function() { 
     jQuery(this).scrollTop(0); 
});
</script>

in the onepage.phtml file in:

/public_html/app/design/frontend/base/default/template/checkout

There are a few questions that remain though:

1. it almost brings the Payment options on the one-page-checkout too far up (all the way) so that now the Payment options are presented on the bottom of a 15.6" display and the CONTINUE button (being right underneath) is no longer visible and customers will now have to scroll down to see it and click it. Is there any way to display the landing page just right? (not all the way to the bottom but also NOT all the way to the top?) and 2. would this change, change it for all other pages? (front page, product page etc.)

Answer 1

Use load instead of ready. You need to add jquery in "/public_html/app/design/frontend/PACKAGE/THEME/template/checkout/onepage.phtml" file. You can get your current onpage.phtml file path by enable path hint on. Link:: https://support.magerewards.com/article/1534-how-do-i-turn-on-template-path-hints (for enable path hint for get your file path - onepage.phtml). After find your file add below code at top of page before php code start.

<script type="text/javascript">
jQuery(window).bind("load", function() { 
     jQuery(this).scrollTop(0); 
});
</script>

Answer 2

If your issue is scrolling you could try adding a jQuery function on the page to always scroll to the top on pageload?

Add to the bottom of onepage.phtml:

<script>
 $(document).ready(function(){
    $(window).scrollTop(0);
});
</script>

And then clear Magento cache.

As a side note, I have had problems with the Magento Porto theme myself and you can usually get a response from the devs for any bugs here:

https://themeforest.net/item/porto-ultimate-responsive-magento-theme/9725864/comments

Answer 3

In Firefox the M1 Porto demo site has some JS Warnings which may be the culprit. A return is in the following method as well as subsequent code which could explain the difficult in finding the elements absolute position to scroll to on validation errors.

/*
 * Different ways to find element's absolute position
 */
Calendar.getAbsolutePos = function(element) {

    var res = new Object();
    res.x = 0; res.y = 0;

    // variant 1 (working best, copy-paste from prototype library)
    do {
        res.x += element.offsetLeft || 0;
        res.y += element.offsetTop  || 0;
        element = element.offsetParent;
        if (element) {
            if (element.tagName.toUpperCase() == 'BODY') break;
            var p = Calendar.getStyle(element, 'position');
            if ((p !== 'static') && (p !== 'relative')) break;
        }
    } while (element);

    return res; // <-- B00MER NOTE: this shouldn't be returning res here, return only AT end of method or some code can become unreachable by the browsers DOM implemenation.

    // variant 2 (good solution, but lost in IE8)
    if (element !== null) {
        res.x = element.offsetLeft;
        res.y = element.offsetTop;

        var offsetParent = element.offsetParent;
        var parentNode = element.parentNode;

        while (offsetParent !== null) {
            res.x += offsetParent.offsetLeft;
            res.y += offsetParent.offsetTop;

            if (offsetParent != document.body && offsetParent != document.documentElement) {
                res.x -= offsetParent.scrollLeft;
                res.y -= offsetParent.scrollTop;
            }
            //next lines are necessary to support FireFox problem with offsetParent
            if (Calendar.is_gecko) {
                while (offsetParent != parentNode && parentNode !== null) {
                    res.x -= parentNode.scrollLeft;
                    res.y -= parentNode.scrollTop;
                    parentNode = parentNode.parentNode;
                }
            }
            parentNode = offsetParent.parentNode;
            offsetParent = offsetParent.offsetParent;
        }
    }
    return res;

    // variant 2 (not working)

//    var SL = 0, ST = 0;
//    var is_div = /^div$/i.test(el.tagName);
//    if (is_div && el.scrollLeft)
//        SL = el.scrollLeft;
//    if (is_div && el.scrollTop)
//        ST = el.scrollTop;
//    var r = { x: el.offsetLeft - SL, y: el.offsetTop - ST };
//    if (el.offsetParent) {
//        var tmp = this.getAbsolutePos(el.offsetParent);
//        r.x += tmp.x;
//        r.y += tmp.y;
//    }
//    return r;
};

SEE INLINE COMMENT NOTE IN ABOVE CODE.

More details as to what could possibly be band-aids for other lesser browser version support that is breaking others.

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors/Stmt_after_return

What went wrong?

Unreachable code after a return statement might occur in these situations:

When using an expression after a return statement, or
when using a semicolon-less return statement but including an expression directly after.

When an expression exists after a valid return statement, a warning is given to indicate that the code after the return statement is unreachable, meaning it can never be run.

Why should I have semicolons after return statements? In the case of semicolon-less return statements, it can be unclear whether the developer intended to return the statement on the following line, or to stop execution and return. The warning indicates that there is ambiguity in the way the return statement is written.

Warnings will not be shown for semicolon-less returns if these statements follow it:

throw
break
var
function

Other code unreachable as well:

reloadPrice: function(){
    var price    = 0;
    var oldPrice = 0;
    for(var i=this.settings.length-1;i>=0;i--){
        var selected = this.settings[i].options[this.settings[i].selectedIndex];
        if(selected.config){
            price    += parseFloat(selected.config.price);
            oldPrice += parseFloat(selected.config.oldPrice);
        }
    }

    optionsPrice.changePrice('config', {'price': price, 'oldPrice': oldPrice});
    optionsPrice.reload();

    return price;

    if($('product-price-'+this.config.productId)){
        $('product-price-'+this.config.productId).innerHTML = price;
    }
    this.reloadOldPrice();
},

Also, it may help if known Browsers with issues & if any without? Ultimately best approach is to get support from the Porto authors to see if there is a fix and/or if others experience similar issues.

Hope this helps!

---

EDIT This may have a solution for ya:

• One Page Checkout begin at top of screen on next

Answer 4

Try this

jQuery(document).trigger('section:update');
jQuery(document).trigger('section:' + section);

jQuery(document).on('section:update', function() {

        if (jQuery(window).scrollTop() >= 230) setTimeout(function() {
            jQuery('html,body').animate({ scrollTop: 0 }, 500); 
        }, 300);

    });  

just before

if(!reloadProgressBlock) {

in opcheckout.js