I hope you can help me. Arrow is added to the bottom of the hero section. Task is to create an anchor so when people click on it, it scrolls down until the homepage disappears.
This should be very simple. Give the element you want to scroll down to an ID (inside of element settings(D)). The ID will be shown in the url when clicked, so make it something relevant. Now go into your arrow link element and choose page section. You can now choose the same ID and the anchor should now work. If not, please feel free to let us know here
thanks. I’m not sure if I did it correctly, but when clicking on the arrow it just starts to scroll, nothing else happens. What I need is when people click on the arrow, the arrow goes down till the end of the homepage while they are scrolling, and when they come to the end of the homepage, it disappears.
Argh okay, I just to be sure, when you are saying homepage, do you mean the WHOLE page down to the footer or the hero section(the first thing a new user sees), also known as above the fold?
You will have to use a Webflow interaction called While scrolling in view . But the element you need to target depends on what you want to accomplish. Can you maybe in some way create a visual representation so I understand fully?
yes, the arrow is at the bottom of the hero section. User clicks on it, scrolling starts, arrow goes down and it is visible until it reaches the end of the page (footer). When it reaches the end of the page, it disappears.
I hope I could describe it better now
Thank you very much
David Xin Long Lin via Forum | Webflow <webflow1@discoursemail.com> ezt írta (időpont: 2020. nov. 13., P 11:19):
Yep makes much more sense now. I would recommend that you do the following. Place your arrow element outside of all elements. So it is siblings with the sections. Give the arrow class a position: fixed and bot: 20px. This will make the arrow “stick to the bottom of the browser viewport”. It should now also move when you scroll down.
Cool, next go in to your footer and give it at scroll in to view interaction. Inside of the interaction, add the animation you want to happen (maybe opacity).
Also add a scroll out of view interaction that reverses the first one.
Thank you very much. The first part is fine, thank you.
But the second part is not clear, sorry. Would it be a problem to ask you to describe it in detail? So first I go into footer and it “scroll into view”?
Although, I am not sure if we are talking past each other, cause when I click the arrow it only scrolls down to the section below the fold (which also makes more sense to be honest)
yes, it was solved in the meantime. It is now set up, how the client exactly requested: Click on the arrow, start scrolling, arrow disappears at the bottom of the page.