Page 1 of 1

Scroll to top (anchor)?

Posted: Fri Mar 02, 2018 4:54 pm
by tedwardson
Hi Norman, I have a client who has expanded the number of images. On some products there are so many that the page on mobile is very tall. Is there a way I can add an automatic scroll to top of the page when the thumbnails are clicked?

Re: Scroll to top (anchor)?

Posted: Fri Mar 02, 2018 5:56 pm
by norman
Lets do this as nicely as possible.

We can detect if the image that's changing is fully visible on the page, and if it isn't we can smoothly scroll the page until image is fully visible.

For this we need 2 things.

1) The visible jQuery plugin from https://github.com/customd/jquery-visible - I've attached a Zipped copy of the only file you need - unZip it into your Site folder.

2) Some code to activate this after a choice changes the main image.
Go to Design / Library / Layouts / JavaScript Header Functions / Standard Javascript Header Functions and paste the following in at the bottom. Make sure it's after the Dynamic Choice Images Product Setup line.

Code: Select all

<script type="text/javascript" src="jquery.visible.js"></script>
<script type="text/javascript">
// This code must be placed after Dynamic Choice Images Product Setup 
// Redefine DCI Image switcher.  Use selected animation type.
function dci_imageswitch(swapimage, newimage){
	switch (dci_animationtype)
		{
		case 'FastSwitch' :									// swap the image - immediate swap
			swapimage.attr('src',newimage);
			break;
		case 'FadeDownUp' :									// swap the image - simple fade down then up
			swapimage.fadeOut('fast',function(){swapimage.attr('src',newimage);swapimage.fadeIn()});
			break;
		}
	// New code - if main image not visible scroll to it
	if ( ! swapimage.visible() )
		{
		$('html, body').animate({
			scrollTop: swapimage.offset().top
			}, 250);			
		}
}
</script>
The advantage of doing it this way is that we've made no changes to Dynamic Choice Images so it can be updated or re-installed without breaking anything.

The 250 in the above code is the time (milliseconds) to take to scroll to the main image. Adjust this to taste.

Re: Scroll to top (anchor)?

Posted: Fri Mar 02, 2018 9:52 pm
by tedwardson
Amazing Norman, thank you.

Re: Scroll to top (anchor)?

Posted: Fri Mar 02, 2018 10:36 pm
by norman
Good to know it's useful.

I'll enhance the add-on to make this part of it. I'll give it a couple of settings so you can enable / disable it and adjust the scroll time.