Page scroll to top automatically after selecting product variant

berricle
Visitor
2 0 4

This issue only apply to Dawn theme > mobile device.

 

Scenario: User is on product page and scroll down until they see variant options such as size / color.

Whenever a product variant is selected (either dropdown or pill format), page is scrolled back to the top automatically which is a bad user experience. Spent the last a few hours and couldn't figure out how to disable auto scroll. 

 

Has anyone experience similar issue and has a solution? 

 

Here is example product page

https://www.berricle.com/products/sterling-silver-925-round-cubic-zirconia-cz-wedding-engagement-rin...

 

Any help is greatly appreciated. Thanks

Replies 13 (13)

EcomGraduates
Shopify Partner
588 48 77

this this code  

 

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

 

This code should prevent the page from scrolling to the top by saving the current scroll position and restoring it after the variant is selected.

berricle
Visitor
2 0 4

Thank you so much for your solution which works 👍.

We also found another solution which is commenting out JS line item from media-gallery.js. 

 

if (!this.elements.thumbnails || this.dataset.desktopLayout === 'stacked') {
   //activeMedia.scrollIntoView({behavior: 'smooth'});
}
 
 
netcodeshop
Visitor
1 0 0

I was having the same issue as OP and this did the trick. Thank you!

capyguru
Visitor
1 0 0

Works perfect man 🙂 thanks

cactusbecks
Visitor
3 0 0

So I use Dawn version 13.0.1, but I can not find this text in the media-gallery asset folder. Any one a solution please?

csimmons06
Visitor
2 0 2

Where do you paste this code and does it work for the Studio Theme as well. Also does this work for the size of a product as well?

 

Elaine_Comeau
Visitor
2 0 0

I am having the same issue. Where are you placing this code?

Cyclops1717
Excursionist
33 0 13

Disclaimer: You understand the risks in modifying your code and either are able to undo these changes or have saved your code before making modification. DO NOT attempt if you don't feel confident in modifying your Shopify Theme code. I am not responsible for your mess 😉

If you have not solved this by now, go to Online Store / Themes, click the 3 dots/menu button of your current theme, then Edit Code.
On the new page, on the left hand side, type "media-gallery.js" (without the quotes) in the search box.
Click the media-gallery.js file.

On your keyboard, hit CTRL+F to search the file for "if (!this.elements.thumbnails || this.dataset.desktopLayout === 'stacked') {". On my file, it is at line 46 but it could be different for you theme.

Once you have located this code, look at the line underneath it. You should see this:

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

Add // in front of the word active.
It should now look like this:

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

Hit the Save button (top right of the page).

 

This is the easiest way to manage what the OP tried to accomplish.

Hope this helps.

phengoiz27
Visitor
1 0 0

THIS IS THE BEST!!!!! IT WORKS!!!

THANK YOU THANK YOU THANK YOU!!!

Gotyour
Tourist
10 0 1

This was such an easy fix! Thank you.

cactusbecks
Visitor
3 0 0

Where do you put this code?

jures
Visitor
1 0 0

For me commenting out the code did solve the scroll issue but on mobile it didn't switch the variant image anymore, so I had to add one more line of code to manualy scroll to the 1st image in the slider when variant changes. I wrote a post about it.

bobgg
Visitor
1 0 0

Hello, this doesnt work on the dawn theme version 13. Could you please have a look at this version? Thanks