Scroll to top (anchor)?
-
- Posts: 4
- Joined: Sat Feb 02, 2013 9:04 am
Scroll to top (anchor)?
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)?
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.
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.
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 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 1014 times
Norman
-
- Posts: 4
- Joined: Sat Feb 02, 2013 9:04 am
Re: Scroll to top (anchor)?
Amazing Norman, thank you.
Re: Scroll to top (anchor)?
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.
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