Disappearing fixed arrow to indicate scrolling

At a glance

The community member has a fixed arrow on their page to indicate to the user to scroll down, and they want to know how to make it disappear once the user has reached the bottom of the page. The comments suggest that this can be handled using Webflow interactions, with a page trigger that hides the arrow when the user scrolls to 90% of the page height. However, the second request to have the arrow scroll the user down 30-50% of the page is likely to require custom JavaScript, as it would involve calculating the full height of the page and then determining the appropriate scroll distance.

Useful resources

QQuinn Bell

I have a fixed arrow on my page to indicate to the user to scroll down. Would someone know how to make it dissaper once you've reached the bottom? Here's a screen recording explaining it.

3 comments

QQuinn Bell

Here is a read only link
https://preview.webflow.com/preview/annie-rosevear-v2?utm_medium=preview_link&utm_sour[…]&pageId=667af43168a47b77dfc7485b&locale=en&workflow=preview

QQuinn Bell

Also... is there a way to add an interaction where when you tap this arrow it scrolls down 30-50% ?

MMatt Johnson

first question can definitely be handled by webflow interactions - second question - I really doubt because you would need to first calculate the full height of the page based on what ever size the user's screen is and then be able to calculate what 30 or 50% of the screen/site would even be. In other words, likely need custom JS for that.

For the first one, it'll be a page trigger > while page is scrolling. In the interactions panel you'd go with the starting point 10% from the bottom (90%) and the end being 100%.

Here's a Webflow University video on this but in the opposite way that you are trying to do it and with a different element but the interaction keyframe concepts are the same.
https://university.webflow.com/lesson/show-and-hide-navigation-bar-on-scroll?topics=interactions-animations

Add a reply

Community forum for knowledge and support

Disappearing fixed arrow to indicate scrolling