Streaming live at 10am (PST)

Arrow scrolls down until the homepage disappears

Dear All,

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.

here is the link: https://preview.webflow.com/preview/psalm?utm_medium=preview_link&utm_source=designer&utm_content=psalm&preview=5d16d32f379deaf16b53b32429c7132a&mode=preview

Can someone please help?

Thank you so much.

Regards,
Marianna


Here is my public share link: LINK
(how to access public share link)

Hej Bach,

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 :smiley:

hello,

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.

Can you pls help further?

Thanks a lot.

Marianna

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? :slight_smile:

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 :slightly_smiling_face:

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.

You should now be set :smiley:

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”?

Thanks a lot for the help.

Here is a quick video to guide you through the steps: https://www.loom.com/share/7f64bc570d534381abd74e7aae816627

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)

hello,

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.

Thank you very much for help, really appreciated :slight_smile:

Kind regards,
Marianna