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

[ShaneBH]

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!

[ThePrimeWeb]

Hey @ShaneBH,

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

[ShaneBH]

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

[ShaneBH]

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