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

[username102]

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!

[username102]

help me please 😞

[StefanBoettjer]

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]

help :((

[meminho]

Hello @username102 

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

[username102]

thank for your help @meminho 

which iOS version you use?

I checked on 14.4.2, it still have problem 😞

[PeanutButter]

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">

[Rasel]

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

[Mike5241]

Hi PeanutButter,

Fantastic tip! It worked for me.

Thank you very much man!

[PhoneCases]

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

[Mike5241]

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