Solved

How can I disable scroll to top on Dawn theme version 2.4.0?

ShaneBH
Visitor
3 0 0

Hi Everyone,

We are using an older version of the Dawn theme (2.4.0). Currently on a product page if you click a color swatch, or any size variable the users browser scrolls back to the top. This isn't so bad on desktop but on mobile it can be a distraction.

Is it possible to disable this scroll to top entirely? I read some existing posts recommending to edit the media-gallery.js file but it seems like our version of Dawn does not have that file.

Any insight would be appreciated, thank you!

Accepted Solution (1)
ThePrimeWeb
Shopify Partner
2077 596 466

This is an accepted solution.

Hey @ShaneBH,

 

I can't really fix the entire thing because i think it's being caused by an app (We are not allowed to edit app code). I see logs of an app running as soon as the button is pressed, but I have managed to build up a little workaround for you. You will see a small glitch when you click a button, but your screen should remain at the same place you clicked to be in. 

 

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Above the tag "</body>" tag paste the following. Screenshot attached for reference.

<script>
document.addEventListener('DOMContentLoaded', function() {
    let scrollTop = 1;
    document.addEventListener("click", function(event) {
      const target = event.target;
      if (target.tagName === "LABEL" || target.tagName === "INPUT" || target.classList.contains("color-swatch")) {
            if(window.scrollY > 0) {
                scrollTop = window.scrollY; 
                setTimeout(() => {
                    window.scrollTo(0, scrollTop);    
                }, 25)
            }    
      }
    });
});
</script>

 

Screenshot for reference

 

ThePrimeWeb_0-1713198438325.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!

View solution in original post

Replies 4 (4)

ThePrimeWeb
Shopify Partner
2077 596 466

Hey @ShaneBH,

 

Can you share the link to your store please? Thanks!

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
ShaneBH
Visitor
3 0 0

Sorry, should have listed the link in my first post!

https://boatmanstyle.com/products/the-yachty

If you select a size, or any color you will notice the scroll to top on the browser. Thank you!

ThePrimeWeb
Shopify Partner
2077 596 466

This is an accepted solution.

Hey @ShaneBH,

 

I can't really fix the entire thing because i think it's being caused by an app (We are not allowed to edit app code). I see logs of an app running as soon as the button is pressed, but I have managed to build up a little workaround for you. You will see a small glitch when you click a button, but your screen should remain at the same place you clicked to be in. 

 

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Above the tag "</body>" tag paste the following. Screenshot attached for reference.

<script>
document.addEventListener('DOMContentLoaded', function() {
    let scrollTop = 1;
    document.addEventListener("click", function(event) {
      const target = event.target;
      if (target.tagName === "LABEL" || target.tagName === "INPUT" || target.classList.contains("color-swatch")) {
            if(window.scrollY > 0) {
                scrollTop = window.scrollY; 
                setTimeout(() => {
                    window.scrollTo(0, scrollTop);    
                }, 25)
            }    
      }
    });
});
</script>

 

Screenshot for reference

 

ThePrimeWeb_0-1713198438325.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
ShaneBH
Visitor
3 0 0

This worked perfectly thank you so much for spending the time to help! The code provided worked great!