Prevent autoscrolling

[clothingjoga]

Hello 

when I switch between variants the page is autoscrolling ( see in the video) How can I fix this? Spotlight Theme.

[Dan-From-Ryviu]

Could you drop your product URL to check?

[clothingjoga]

https://clothing-joga.com/products/kopie-von-oversized-shirt?variant=47411063718232

Password „ShopTestJoga123“

[Dan-From-Ryviu · Accepted solution]

Hi @clothingjoga 

Could you change option Desktop layout in your Online store > Themes > Customize > Products > Default product to Thumbnail carousel and then check if it solve this issue.

[BSS-Commerce]

Hi @clothingjoga ,

You can try using the following solution

In Online store, select Themes -> More -> Edit code

In the media-gallery.js file, press Ctrl + F and search for the phrase scrollTo and comment on the code line as shown in the image, click Save to save the changes.

If you still have problems, you can search for similar phrases: scrollTo, scrollIntoView,... in other .js files and comment with // and check if the problem still exists or not

Hope my answer will help you. @clothingjoga 

[clothingjoga]

Thanks for your try, but there is still the same problem. Any other ideas?

[BSS-Commerce]

Hey @clothingjoga ,

If your problem persists, you can try one of the following two solutions:

1. In the file media-gallery.js, find the line of code:

activeMedia.scrollIntoView({ behavior: 'smooth' });

Replace with the following line of code:

// activeMedia.scrollIntoView({ behavior: 'smooth' });

 Click Save to save changes

2. In the theme.liquid file, add the following code before the {% endstyle %} tag

<script>
  $(document).ready(function(){
    $('select, input[type="radio"]').on('change', function() {
       var currentPos = $(window).scrollTop();
       setTimeout(() => {
         $('html, body').scrollTop(currentPos);
       },100)
    });
  });
</script>

Click Save to save changes

Hope these solutions will help you @clothingjoga 

[clothingjoga]

 Is this the right position? When yes, it is not working.

[BSS-Commerce]

Looks like I made a mistake, the correct place to add that code is before the </head> tag, not the {% endstyle %} tag. I'm very sorry about this mistake of mine.

Hopefully changing this solution will work on your store.