Need HELP: My site auto scroll to top when press back from product page in IOS

username102
New Member
4 0 0

Hi guys,

My site always forgot previous scroll position and auto scroll to top when press back from product page in IOS. I had tested in Window and Android still good. 😞

My site use Debut theme: http://1975nails.com/.
Please help me check it. Thank you!

Replies 10 (10)

username102
New Member
4 0 0

help me please 😞

StefanBoettjer
Shopify Partner
13 1 4

Hi there,

 

hope that will help:

the problem is, that the main content of your side is not really preloaded. So the browser can not remember the Y-Scroll position.

E.G: If you press on a link in your footer, scroll down and then click page back it should work also in mobile.That's while the footer is completey loaded.

You're not writing what is your theme, so i give you a short instruction on the new DAWN theme:

 

1. Go to Online-Store --> themes

2. Click on --> Actions --> Duplicate (just for a backup

3. If done click --> Actions --> EDIT CODE

4. Open your theme.liquid in LAYOUT

5. Find the section where youre header is loaded. Something like:

 

{% section 'header' %}

 

Directly after the section has been loaded, the main-content will be loaded e.g.:

 

<main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">
{{ content_for_layout }}

 

Remove this line:

 

<main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">

 

After that your code should be shown e.g. like this:

 

 

{% section 'announcement-bar' %}
{% section 'header' %}
    
{% comment %} DISABLED:
 <main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">
{% endcomment %}

 {{ content_for_layout }}               
 
{% section 'footer' %}

 

Click SAVE, Reload your page, try it.

 

Hope that works for you.

 

Have a great day,

 

Stefan

username102
New Member
4 0 0

help :((

meminho
Tourist
5 0 1

Hello @username102 

 

I'm not a professional but I've checked your website on my iPhone and it seems OK.

username102
New Member
4 0 0

thank for your help @meminho 

which iOS version you use?

I checked on 14.4.2, it still have problem 😞

PeanutButter
Shopify Partner
385 67 182

Actually you only need to remove the  tabindex="-1" in theme.liquid's <main> tag.

 

This line should be changed

<main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">

to:

<main id="MainContent" class="content-for-layout focus-none" role="main">

  

Peanut Butter Collective | Shopify Experts
- Was my reply helpful? Please Like and Accept Solution.
- Want to customize and improve your store? Hire us.
- Feel free to contact me us hello@peanutbutter.es
Rasel
Shopify Partner
31 3 3

Rasel_0-1671778731990.png

my code is like this, but still happening in some device

Rasel | Shopify Expert
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- For additional information, please contact with me.
rasedulrasel21@gmail.com
Mike5241
Excursionist
49 0 9

Hi PeanutButter,

 

Fantastic tip! It worked for me.

 

Thank you very much man!

iPhoneCases
New Member
7 0 0

Hi! I trued to remove the tabindex="-1" but product page still returning to top of page. Any suggestions?  

Mike5241
Excursionist
49 0 9

Hello,

 

Maybe it depends on the IOS? I tested it in 15.8 and 17.3 and it works ok in both. Try the complete solution from Stefan

 

Good luck