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).
- Create a new animation.
- Select the button element (in my case .scroll-up).
- Create the animation. I called it Page scrolled.
- 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%
- 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: