Scroll Back to Top button [OUT] after passing section with interaction

Design help Animations & Interactions
1

So I found a few older topics about this but they were outdated. I researched on Webflow templates and found something that partially did what I was looking for, but even on their videos the comments bring up my same concern. Here it goes:

I have a case study that is really long (over 20 sections). I was advised to add a “Back to top” button when passing the section 3 or 4.

The video example I found shows well how to add the button to the page and how to add an interaction to appear on section 4.

The issue:
When adding the interaction [OUT] so the button disappears when you’re scrolling back up to the beginning of the page, the button also disappears when you are still scrolling down passing section 4 going down to section 5, 6, etc;

My question is: What is the best way to ensure the “Back to top” button continues to show when scrolling down pass section 4 but it disappears when scrolling back up passing section 4.

My workaround, so far, was adding an offset to the [OUT] interaction of over 115% which shows the button when scrolling down, but no longer hides it when scrolling back up.

Here’s the link to my case study: Webflow - Kell Egbert

Here’s the link to the WebDev daily interaction showing how to add the animation: https://www.youtube.com/watch?v=9UnwuDlaIXw

Thanks for all the help I can get :slight_smile:

Here is my public share link: [LINK](Webflow - Kell Egbert)
(how to access public share link)

2

Number of ways to do it but you could just wrap all needed sections with a div and apply a scroll interaction to it. When this wrapper is in view the button is visible, when out of view the button is hidden.

1 Like
3

Well, that’s the fastest and clever way to do it. Thanks for the quick solution @Port_of_Folio

1 Like