Framer Sticky Scroll Elements Prototype for scrollsToTop on Websites

All iPhones and iPads come with an interesting gesture. Apple calls it Scroll To Top. Whenever a user wants to return to the top of the screen, she taps on the status bar. That’s the area on top on iPhone, showing the time.

Scroll To Top is an interesting UX affordance. Developer choose to enable it or not. When it’s on, it works on website and apps. Scroll to the top of the feed on Twitter by tapping the status bar. Same for Instagram and websites.

Today, Framer supports Sticky Scroll Elements for prototyping. It’s pretty easy to use for advanced and realistic, interactive prototypes. No code needed. Here’s a short video made by the Framer team, explaining how the feature works.

My excitement was high. I felt intrigued by this new capability and set to explore a new concept. What if websites in large view ports had the Scroll To Top gesture built in their header? Some times websites offer a Scroll To Top element. Usually a floating arrow, on top of the content, pointing to the top. When the user clicks on it, the website returns to the top. It’s a handy shortcut, but it’s always visible.

With Framer’s Sticky Scroll Element, I explored a new UX concept. The header is sticky. Visible and accessible at all times. It can maintain its size or become smaller while scrolling. The key is to remain always visible. Navigation elements are a click away. Menu and profile links too.

See it in action

The website for Kraäfft is imaginary. It uses the Framer’s Sticky Scroll Element and Smart Components. Horizontal and vertical scrolls are also present. No code.

Here’s a short video made by me, showing how this new user experience could work in the browser.