2
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.)

2
+100

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>
  • You are the man! ;-) This is the first solution I've tried that actually WORKS! (and I've tried many) How wonderful. I am so happy now! Two questions for ya: 1.It now moves everything to the very top which is better as compared to when it was moving the screen to the bottom but now (mainly due to a large categories' menu)-I see the Payment options on the bottom of the one-page-checkout but the CONTINUE button is no longer visible on a 15.6" display with standard resolution.Is there any way to move it just a tiny bit lower? and if so-2.would that affect all the other pages on our site? – Allysin May 13 '18 at 16:57
  • @Allysin , Thanks for accepting answer. I am clearing your two questions now. 1) If you want to move it tiny bit lower than you can pass integer value in jQuery(this).scrollTop(YOURVALUE); - You can pass value as per your need like 10 or 20 or 50 etc.. 2) This code will not affect all pages in site because it is placed under checkout page files. So this will not affect other pages on your site. – Chirag Rajput May 14 '18 at 8:59
1

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

  • Is this the onepage.phtml in /public_html/app/design/frontend/base/default/template/checkout ? I did add that code to the bottom of that file and it did not help. I don't believe this to be a Porto theme problem but a Magento problem instead. I researched this quite a bit and I found people posting this issue with just the default Magento theme... – Allysin May 7 '18 at 16:28
0

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.

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:

  • 1
    Thank you for trying to help. I am certain this is not a Porto issue as such - I've read a lot of people having the same problem with just the default Magento theme. I tested it with Chrome, Opera and IE and they all have the same problem - when I get to the Payment options - it loads either at the very bottom of the page or close to the bottom. Your explanation is a bit more complicated than what I can understand...I was hoping for a quick solution such as Take this code and put it here, done! Thanks again for trying to help - it is very much appreciated! – Allysin May 7 '18 at 16:35
  • @Allysin magento.stackexchange.com/questions/99745/… may be of help. – B00MER May 7 '18 at 16:44
  • 1
    I tried that and still no luck. Thank you though! ;-) – Allysin May 7 '18 at 22:24
0

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

  • I just tried to make that correction in the opcheckout.js in "/public_html/skin/frontend/base/default/js" (is that the correct path?) and it did not fix the problem. I put the code right before this line: "if(!reloadProgressBlock) {" – Allysin May 11 '18 at 23:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.