Scroll to top (anchor)?

Images added to each Choice. Images displayed as scaled down icons. Main image swaps when the Choice is selected.
Post Reply
tedwardson
Posts: 4
Joined: Sat Feb 02, 2013 9:04 am

Scroll to top (anchor)?

Post by tedwardson » Fri Mar 02, 2018 4:54 pm

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?

norman
Site Admin
Posts: 1221
Joined: Sat Feb 07, 2004 9:55 pm

Re: Scroll to top (anchor)?

Post by norman » Fri Mar 02, 2018 5:56 pm

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.
Attachments
jquery.visible.zip
(1.24 KiB) Downloaded 21 times
Norman

tedwardson
Posts: 4
Joined: Sat Feb 02, 2013 9:04 am

Re: Scroll to top (anchor)?

Post by tedwardson » Fri Mar 02, 2018 9:52 pm

Amazing Norman, thank you.

norman
Site Admin
Posts: 1221
Joined: Sat Feb 07, 2004 9:55 pm

Re: Scroll to top (anchor)?

Post by norman » Fri Mar 02, 2018 10:36 pm

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.
Norman

Post Reply

Who is online

Users browsing this forum: No registered users and 2 guests