Stop auto scroll to top on mobile device | Dawn

Solved

Stop auto scroll to top on mobile device | Dawn

Atsimataves
Excursionist
46 0 5

Hello guys,

 

I have a problem with auto scroll top on mobile. When I back from product/page I am immediately sent to the top. Very unpleasant experience. In previous discussions I found the following code:

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

 

It said to delete lines 1 and 3 and it would work. The real ones were working, but today I noticed that everything is back.

 

https://d5ab0f.myshopify.com/

Password: amber


Thank you so much!

Accepted Solution (1)

BSS-Commerce
Shopify Expert
3477 463 526

This is an accepted solution.

Hello @Atsimataves, to do that, you can find the theme.liquid file and add the following code:

<script>
if (window.location.pathname === '/') {
    if (localStorage.getItem("my_app_name_here-quote-scroll") != null) {
        const savedScrollPosition = localStorage.getItem("my_app_name_here-quote-scroll");
        window.scrollTo(0, savedScrollPosition);
    }
    window.onscroll = function() {
        localStorage.setItem("my_app_name_here-quote-scroll", window.scrollY);
    };
}
</script>

This code will save the location of the page before being routed to another page into localStorage. Then when you return to the page, the website will take the location saved in localStorage and move to that location. Hope this can help you.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 3 (3)

BSS-Commerce
Shopify Expert
3477 463 526

This is an accepted solution.

Hello @Atsimataves, to do that, you can find the theme.liquid file and add the following code:

<script>
if (window.location.pathname === '/') {
    if (localStorage.getItem("my_app_name_here-quote-scroll") != null) {
        const savedScrollPosition = localStorage.getItem("my_app_name_here-quote-scroll");
        window.scrollTo(0, savedScrollPosition);
    }
    window.onscroll = function() {
        localStorage.setItem("my_app_name_here-quote-scroll", window.scrollY);
    };
}
</script>

This code will save the location of the page before being routed to another page into localStorage. Then when you return to the page, the website will take the location saved in localStorage and move to that location. Hope this can help you.

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency
Atsimataves
Excursionist
46 0 5

@BSS-Commerce Mystical, but for now my method written before works. Anyway, I saved this code in a draft and will definitely use it!

Thank you very much for your time and help. 💛

Grab_The_Brand
Tourist
25 0 2

Hi, I tried this and it didn’t work unfortunately, can you help me please I am having the same problem? When browsing products on my website through a link on Instagram and you click the back button it takes you back to the top of the page.