This is a read-only archive of the Framer Community on Facebook.

What is Framer? Join the Community
Return to index
Vicky Yang
Posted Sep 16 - Read on Facebook

Hi,
I’m trying to make a “Back to top” button. When the user scrolls to the 3rd yellow section, the “back to top” button should fade in. When clicked, the page should scroll back to top where the first blue section is in the viewport. I can’t get past the .click to top part. Would really appreciate it if someone could help!
Here is the link - http://share.framerjs.com/0htd9c7gqs13/
Thanks!

5 Comments

Alan Dickinson

When you're using the scroll component, it creates a layer called content that contains all the layers you want to scroll. This is the layer that actually gets scrolled, not the layer you wrap with the component. So your back to top button is almost working, you just need to change line 19 from Desktop_Landscape.animate to scroll.content.animate

Vicky Yang

Thank you so much Alan! It's wooorrrkkiiinnngg!

Vicky Yang

Now I'm having trouble on the fade-in "back to top" part. When the user scrolls to the 3rd yellow section, the “back to top” button should fade in. http://share.framerjs.com/noeckripvd0l/
Anyone know what went wrong?

Alan Dickinson

When I want to do something based on the scroll offset, I use the change:y event instead of the Events.Scroll event.

scroll.content.on "change:y", ->

http://framerjs.com/docs/#events.change

Vicky Yang

Worked like a charm! Thanks again Alan!

Read the entire post on Facebook