Product Page - stacked gallery, scroll down button

For SS's 7.1 Product Page, there is the stacked version, that keeps the product details sticky on 1/2 the screen, and a vertical stack of the product images on the other half, visible on scroll.

I am wondering if it is possible to build out a div element (via product header injection) that functions as a down arrow button sitting near the bottom of the first product image that when clicked, scrolls the viewport down to the second image.

This way, viewers will know that additional product images exist beyond the first and only visible image in the viewport. I am comfortable with CSS to place the element, but am wondering if anyone has thoughts on how to implement script to make this come alive?

Thanks!
Maya

Can you share link to a product? We can test some script code

On 1/14/2023 at 5:48 PM, tuanphan said:

Can you share link to a product? We can test some script code

Yes! Product page is here, pw: ygstudio

Thanks so much @tuanphan, let me know what you can find. I am also interested to see if in general, there is a way to implement an "anchor link" effect, without having an actual anchor to direct it to, but with the ability to control the increment (ex - 100vh) in which the button scrolls down the page, for other general pages?

Thanks for your time and brain power!

Hi @tuanphan, any thoughts on this? Thank you!