3

My product view is suddenly loading at the bottom of the page requiring visitors to scroll up. This is affecting all of my products.

What code I can use to force the page to the top upon load so that visitors are not required to scroll up?

3 Answers 3

10

most likely you have a form in the footer that is set on autofocus.
This happens when you created a from js object like this:

var someForm = new VarienForm('some-id', true);

the second parameter means firstFieldFocus. So if you set it to true then the first field in the form will be autofocused when loading the page.
There is no need for js workarounds. Just make the second param false;

My money is on a newsletter form

7
  • You were right on the money! I had a custom contact form in easy tabs. Implemented your suggestion and removed the java script and it worked. Thanks Marius!
    – SR_Magento
    Commented Feb 19, 2014 at 16:24
  • Ive been pulling my hair out with this! Marius you really are the man!
    – Bobadevv
    Commented Nov 26, 2015 at 14:24
  • @Marius Where do I find this code? I am still having this problem and it is serious (many customers don't know what to do when they get to the Payment option screen because the screen loads at the bottom and they don't see the actual payment options)
    – Allysin
    Commented May 6, 2018 at 20:34
  • @Allysin It should be in the newsletter template file.
    – Marius
    Commented May 7, 2018 at 5:22
  • @Marius Do you mean what's under System - Configuration - Customers - Newsletter - under Success Email Template, Unsubscription Email Template, Confirmation Email Template that I should be able to edit under System - transactional Emails - Add a new Template? When I click on the Add a new Template - I don't get any drop down options under Load default template - template* I'm on Magento 1.9.1. I'm looking for any solution to fix this even if it's not the most elegant one...
    – Allysin
    Commented May 7, 2018 at 10:16
0

My solution to this was simply going to opcheckout_rwd.js and added this code

Find this section:

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

Added this line:

$j('html,body').animate({scrollTop: $j('#checkoutSteps').offset().top}, 15);

Scroll viewport to top of checkout steps for smaller viewports

if (Modernizr.mq('(max-width: ' + bp.xsmall + 'px)')) {
    $j('html,body').animate({scrollTop: $j('#checkoutSteps').offset().top}, 800);
}
1
  • I tried doing this but it did not help. I have the Porto theme - is that why? How could I do the same with the Porto theme? My customers are abandoning the cart when they get to the Payment steps because it's bringing them all the way to the bottom of the page and they do not see the actual Payment options...
    – Allysin
    Commented May 7, 2018 at 11:34
-1

This can be resolved with java script. You need to add the following code at the bottom of view.phtml:

<script type="text/javascript">
window.onload= function(){
parent.window.scrollTo(0,0);
}
</script>

This will automatically scroll the visitors window to the top of the page.

3
  • which view.phtml are you talking about? I have this problem when customers click on CONTINUE on step 3 (SHIPPING METHOD) it loads the BOTTOM of step 4 (PAYMENT INFORMATION) - you cannot see the payment options at all! You have to scroll up to see them! This is a real problem because many customers are not able to figure out they have to scroll up...How can I correct this?
    – Allysin
    Commented Jul 20, 2015 at 21:42
  • I am willing to do anything at this moment to get rid of this problem (customers abandon sales because they do not see the Payment options because the screen scrolls all the way to the bottom). I found a few of the view.phtml files = in "\app\design\frontend\base\default\template\review" and also in "app\design\frontend\base\default\template\review\customer" and "app\design\frontend\rwd\default\template\sales\recurring\profile" Where should I add this code to? Thank you so much!
    – Allysin
    Commented May 7, 2018 at 11:15
  • I've put this into view.phtml in 5 different places but it still doesn't work: 1. app\design\frontend\base\default\template\review 2. app\design\frontend\rwd\default\template\review 3. app\design\frontend\base\default\template\review\customer 4. app\design\frontend\rwd\default\template\sales\recurring\profile and 5. app\design\frontend\rwd\default\template\sales\billing\agreement
    – Allysin
    Commented May 7, 2018 at 11:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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