Hey everyone,
I wanted to share a little challenge I faced recently and how I managed to solve it — thanks to ChatGPT, of all things!
I’m a photographer, not a web developer. So while I'm learning F6, having moved from Foundry, sometimes I run into things that feel a bit over my head. My latest idea? Our gallery is quite long, especially on mobile, so I wanted to create a scroll-to-top button that:
1. Reveals itself after scrolling a certain distance, and
2. Sticks to the bottom-right of the viewport (20px from the edge), with a smooth fade-in animation, and
3. Hides itself after scrolling to the top of the page.
It’s the sort of thing that feels like it should be simple, but when you’re not a coder, it quickly turns into a bit of a head-scratcher.
The Solution
I turned to ChatGPT to see if it could help — I didn't think it would 'know' F6 in depth, TBH — and honestly, I was blown away. It not only walked me through how to achieve this, but it also explained which F6 stacks to use and provided the exact CSS and JavaScript I needed. No more, no less — it seems very lightweight.
First, I added a Link button stack, with the CSS class of reveal-button, and (found on the forum) added data-smooth-scroll as a Custom Attribute. Link is pointing to an Anchor at the top of the page.
Then some code was needed. It's probably very simple for many folk here, but it's way above my pay-grade:
CSS (in a CSS stack)
.reveal-button {
opacity: 0;
visibility: hidden;
position: fixed;
bottom: 20px;
right: 20px;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
.reveal-button.visible {
opacity: 1;
visibility: visible;
}
JavaScript (in a Javascript stack)
document.addEventListener('scroll', function () {
const revealButton = document.querySelector('.reveal-button');
const revealPoint = 600; // Scroll distance in pixels to trigger the button
if (window.scrollY > revealPoint) {
revealButton.classList.remove('fade-out');
revealButton.classList.add('fade-in', 'visible');
} else {
revealButton.classList.remove('fade-in', 'visible');
revealButton.classList.add('fade-out');
}
});
I did have to play around with the relative z-index Swatches I have in Site Styles applied to some of the elements on the page (I've got a Photo Pro gallery, Off-Canvas, a couple of Lightboxes, etc, on the main page).
I then put the CSS, Javascript and Link button stacks into a Partial, so I can throw it onto any page. Button styling is handled easily with Site Styles (I'm really growing to love Swatches, especially applied to all elements!)
Why I’m Sharing
Primarily, for other ex-Foundry users (which had a specific stack for this). I hope it may be useful.
What really impressed me was how specific and tailored the solution was — this is a pretty niche case, but ChatGPT made it feel approachable and gave me confidence to try things I couldn’t have attempted on my own.
I’d definitely recommend giving ChatGPT a try when you’re stuck. Even if you’re experienced, it’s like having an extra set of hands when you need to solve something quickly.
Apologies if you're sitting there facepalming because this is a dumb way to do this — I genuinely have no idea if I could've done this an 'easier' way!