Daily Interaction #23 | Scroll to Top Button | WebDev For You | Made in Webflow

[@rociogarcia1121]

Man! You have saved my life! I love your tutorials and your ability to explain in a simple way. Thanks!!! Please keep doing this! Already subscribed:)

[@andreamaritzaromero]

This is a really great tutorial thank you! but how would I keep the button present as I am scrolling down the webpage. Instead of having the button appear halfway through the last section, I want it to appear midway throughout the webpage and stay fixed to the screen, my button disappears after I scroll past the section I linked the interaction to

[@markdarling1778]

Quite a long time ago, but the solution I used is to: Create a div with nothing in it, set 'Position' to 'Absolute', set the top position to 100% or x number of pixels, whatever you like to push it down the page (it's the position settings under the 'Absolute' Position if that makes sense), and give it a height equal to the content of the lower half of the page. Basically you're adding a div that will start however far down the page that you want that goes to the bottom of the page. Then you add an interaction trigger using that element instead of the section so that it won't ever really scroll past that div since it goes to the bottom, but when it comes back up, you trigger the back-to-top-out animation for the arrow to disappear. Hope it helps!

[@andreitrapizonian]

Awesome video, dude! About to create that button for my website.

[@kimhengmok]

Nice tutorial What if we have a footer and we want the back-to-top button don't show on the footer section. How can we do it? I have no clue how to apply the sticky position above the footer section for that one. I tried …

[@martinangst3396]

Thanks for your tutorial! Very helpful.

[@SugarSweet1897]

would've been a perfect tutorial if it weren't for the fact that the button disappears if you scroll past section 4

[@Mason_Moon]

Very helpful ! Thanks !

[@toratora77]

Thanks John, your tutorial is amazing !. Congrats !

[@msndotnet01]

You are awesome, thank you.

[@MustafaMehraab]

thanks for this I was searching for this kind of tutorial you solved my problem

[@stefandavison]

Hi John - when I finished the animation it previews the animation fine - but when i preview the page itself the button completely disappears and i can't still press the invisible button but it never reveals

[@Sehri58]

Also, if I want to use this for different pages, do I make it a symbol to be reusable?

[@staticmotion1628]

Thank you John love this channel I learn so much

[@WebDevForYou]

:).

[@Ioannnify]

Thanks for the tutorial, but wish you had just uploaded a simple arrow icon especially whey you don't show us how to install the fontawesome in webflow.

[@WebDevForYou]

Hi Loannify, I can create an updated video on this and show how to install font awesome icons. Will keep you posted when it's released!

[@Ioannnify]

@@WebDevForYou Hi and thanks for your response! I researched and installed fontawesome, that was the easy part. I'm trying to follow along with your instructions but it gets very confusing after @13:00, the Webflow version you are using has a different interface but I finally figured it out, thanks !

[@WebDevForYou]

@@Ioannnify Awesome, happy to hear it loannify. Might create an updated version using the newer Webflow interface.

[@Ioannnify]

@@WebDevForYou Would be good for newbies like myself lol. I'm on a journey to learn Webflow so I'll definitely be watching your channel!

[@bojanpecanac]

Great tutorial. Thanks for making it and sharing it for free! What if I wanted the back-to-top-arrow to appear when scrolling into section 3 and remain even while I scroll PAST section 3 and ONLY disappear when I scroll back up to section 2 and beyond?

[@bojanpecanac]

I just put all the bottom half sections in a div and placed the trigger on it. It works, but is it the correct way?

[@Sehri58]

I linked it to section 2, but after it passes section 2, it disappears. How do I make sure the button appears at section 2 and then stays as we scroll down?

[@WebDevForYou]

Hi Sahar, can you send the read-only link? I can take a look from here. university.webflow.com/lesson/share-your-project-and-invite-collaborators

[@MorganCrockett]

@@WebDevForYou I'm experiencing this as well. Is there a way to keep it visible past the section scroll for the rest of the page?

[@AttackoftheAsian]

Hi, thanks for the tutorial. Quick question, how do you get rid of the back to top button on the mobile versions? I can't seem to figure it out. If I delete it, it disappears from the desktop version as well

[@yomiikotun3495]

Hide the button ONLY on mobile. Just like you would hide other elements.