On this page I have a floating action button (FAB) that is supposed to be a back to top button. It is purple on the bottom right corner.
The page I have the problem on is called “secondary page styles” and here is a screenshot of its location, since It seems I can’t share a public share link directly to a page right?
Inside that page I have a linked div called “Back to top Button”
That button has a transform set to it to go down 100px off the page.
When you scroll down the page, I have a div called “Back to top trigger” which has an interaction applied to it. The interaction targets the “Back to top button” div and has it animate in. That works fine.
My problem is that I have another trigger div toward the top of the page called “close back to top button trigger” which also targets the button with an interaction. That div tells the button to hide again. This seems to work sometimes, but usually it doesn’t. And even when it does work, the button will no longer animate in when I scroll down the page again.
The desired behavior is that the button should appear when you scroll down the page a bit, but then hide when you go back to top. And this should repeat if you scroll down the page etc.
I did share the read-only link, it’s at the bottom of my original post. Did you mean share a read-only link to the exact page? How do you share a read-only link to an exact page within a folder?
Ok. The way the two interactions are set up, they nullify each other since it looks like the second back to top trigger depends on the first one being relatively placed in the page. It is not possible to target a scroll interaction on a fixed element since it is not relative to any other element.
Now at the risk of mincing my words here, you can use you can use this snippet of code since what you are trying to accomplish cannot be done natively in Webflow since unit-based scroll interaction;
Place this script in the footer code section in your dashboard
<script> $(window).scroll(function() { if ($(this).scrollTop() >= 600) { //when the window gets scrolled 600px or above $('.back-to-top-trigger').addClass('active'); } else { $('.back-to-top-trigger').removeClass('active'); } }); </script>
The active class reference above means adding a class to Back To Top Trigger button and styling it to how you want it to appear when visible;
Here is a topic on how to add classes to simulate different states for your elements;
Thank you…so there was no flaw in my interaction logic, it’s just impossible with native webflow? I find this sort of solution disappointing since the entire point of webflow is to be able to create websites without having to code.
