Magic Button to Scroll to the Top

Noticed something cool on the Pintrest home page. Pintrest, like many other sites, has a view where the user can almost indefinitely continue to scroll down the page. As long as the user keeps on scrolling, the site asynchronously fetches more content. I’ve seen this in Facebook (news feed), Google+ (stream), and many other iOS web pages. 

What’s cool about such an interaction is that the user is not required to click on a button to go to the next page to view more content. They can just keep going. What’s not cool is that most of the time, when you get to the bottom — especially for many iOS pages, there’s no easy way to get to the top. 

Pintrest solves that problem by placing a button on the page, that when clicked, will take the user gracefully to the top of the page — and will also cleverly animate that the page was scrolled up. 

Image

As an example of what happens in the case without such a button, you can take this blog itself. By going to my main landing page, azadzahoory.com, you have the ability to scroll down, and down, and down, until you reach my first ever post on Google Finance and Google +1. At this point, you will notice the block in the scroll bar has gotten very tiny and there’s no easy way to go to the top unless you click and drag the block all the way up. 

Image