A better "Return to top" experience
Sometimes long pages are unavoidable but adding pagination to certain content makes it more difficult to use. The types of pages I am talking about are FAQ's, faculty lists, and course listings. It can often span up to twenty times the height of a standard browser.
# Pagination sucks
Breaking this content up in to multiple does allow the visitor to see a fair amount of information on a single screen without scrolling. But if they want to explore more they have to take an action that isn't natural to the Web and "page" through the content like a book. Book pages work great because they are natural, there are a lot of touch points where you can grab and make the transition back and forth easily. Pagination on the Web, though, is not so easy. Typically it involves very small numbers at the bottom of the content, a precise click on the next number, and waiting for a page to load.
# "Back to top" is annoying
The solution most websites take (opens new window) is to put all the content on one page and at multiple places down the page add a link labeled "Back to Top". This typically links to an anchor #top which is defined at the top of the page or content. This seems logical for the Web since scrolling is just a fingertip away, people often use the CMD+F to search page content and there is no reloading and waiting for the page.
But "Back to Top" still doesn't get it right. The Web is used as a page of content to be consumed and to take a next step, ideally getting the visitor one step closer to their goal. "Back to Top" links introduce two obstacles to that goal. The first is clutter on the page that doesn't relate to the content. The second is a link that unnaturally moves the user "backward" to where they came from.
# The holy grail
We are not claiming to have invented this technique, just adopting it and embracing how more usable our pages are because of it. The technique is to omit the "Back to Top" links all together and force the user to scroll. Then use javascript to detect how far the visitor has scrolled and display a button (in a static location out of the content area) which scrolls the user back to the top of the page. It's a technique that isn't visible unless you see it in action. The video below shows how it works:
This solution solves the user experience issues introduced by pagination and the "Back to Top" links. It allows for all the content to be on a single page so the user can search and not have to reload and reorient themselves with each new set of content. It also doesn't clutter the page with extra links that don't bring the user closer to their next goal.
# How it works
It progressively adds value to the page as the user scrolls down the page. The solution also introduces something else, a visual sign of what the action does. The default construct of a "link" is to move the visitor to another separate page, but in fact the "Back to Top" breaks that construct. The icon used to denote "scroll to top" visualizes exactly what the button will do once clicked, the user doesn't have to guess or be surprised.
# A little something extra
Lastly, a little something to pleasently surprise visitors is when they click to return to the top, the page doesn't just jump up leaving the user to re-orient themselves with the page once again. It instead scrolls smoothly to the top passing by all the content they just viewed. Now at the top of the page again they just saw the journey they took down the page rewound and are at a familiar place with no need to re-orient themselves.