▼
Streaming live at 10am (PST)

Scroll to Top Button with WF interactions 2.0

#1

Experiments with the new interactions led to a smart way of managing the little “Scroll to Top” button, appearing or disappearing in the viewport corner.

Whenever you scroll down - the button appears. If you scroll up - disappears.
Demo - mateo-su.webflow.io

This solutioin allows placing the button element anywhere inside the Body (I prefer footer).

  1. Create a new animation.
  • Select the button element (in my case .scroll-up).
  • Create the animation. I called it Page scrolled.
  1. Edit When scrolled Up state:
  • create timed animation “Top hide” with Show/Hide type.
  • 1 step is Display: block
  • 2 step is Display: none
  • set an offset of 30%
  1. Edit When Scrolled Down step:
  • create timed animation “Top appear” with Show/Hide type.
  • 1 step is Display: none
  • 2 step is Display: block
    -set an offset of 40%

That’s it!

See the settings from above:

image
image.png242x756 11.1 KB

image
image.png240x732 11.1 KB

#2

Thanks @ilya,

I followed your instructions and it works. However, I have a slight problem. If I use the button once it adds the #nav-bar to the end of the url which means if I scroll down again and refresh the page it goes to the top automatically. Is this normal?

Here’s my link

Here is the link for one of my pages that has the back to the top button so you can test it live.

I have tested a few other sites from around the web and some don’t add the # at the end of the url so don’t have this issue but others do and have the same problem.

It might not even really be a problem, I just noticed it when I was designing the page and refreshing it a lot.

Thanks,
Kevin

#3

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.