Zach’s ugly mug (his face)

Zach Leatherman

Trash that “Back to Top” Link

05 Feb 2010 Zach Leatherman 4 min read

It would seem that perfection is attained not when no more can be added, but when no more can be removed.

—Antoine de Saint Exupéry

While most would argue that the principles espoused in the above quote might also be applied to the quote itself, it would serve us better to consider how we can attempt perfection in our User Interface designs instead.

The most complete litany of reasons why you should spend your page weight on more useful bytes has been compiled by Jukka Korpela, although he seems to both confirm that they are harmful and still use them on his site.

The rules of engagement I find useful when dealing with the ill-fated “Back to Top” or its ugly stepsister “Top of Page” link are as follows:

  1. Delete the link.

Really, you don’t need the link. It’s a sacred cow remnant of a time when people believed that all content needed to be positioned above the page fold.

Guess what? People know how to scroll! They know how to scroll down, they know how to scroll up. Considering this prerequisite has been met, it becomes very apparent that the “Back to Top” link shares an unnecessary overlap in functionality with the scrollbar and is thus, unnecessary itself.

If you have an incredibly long page with a full set of “Table of Contents” links, it would be better to position your table of contents fixed to the viewport, so as to make it always available to the user. If the Table of Contents is always available, the user will never have to click a link as a shortcut to find it.

While not a usability epidemic, the “Back to Top” link is still widely used. Instant Shift and Smashing Magazine both have articles with hundreds of examples of sites with these links.

Don’t agree? If you’re stubborn as hell and hate simplicity, you’re going to keep the link on your page no matter what reasons are presented. In that case, at the very least follow these two guidelines:

  1. Use progressive enhancement:

    <a href="#" id="back-to-top">Back to Top</a>
    
    // Requires jQuery
    $('#back-to-top').click(function() {
        window.scrollTo(0,0);
     
        // don't change the hash if not needed
        return false;
    });
    
  2. Hide the link if the page doesn’t have a scrollbar. If no scrollbar exists, the user will always be “at the top.” // Continuing with Previous Example

    // Continuing with Previous Example
    $(function() {
        $('#back-to-top').hide();
    });
     
    // If the page scrolls, we know there is a scrollbar.
    $(window).scroll(function() {
        $('#back-to-top').show();
    });
     
    // For completeness, you may also want to
    //   add logic to the "resize" event.
    

Really though, just delete the link.

8 Comments

➡ Load Disqus to Leave a Comment ⬅

Is it ironic, then, that I read this article through Feedly, which has a "back to top" link at the bottom? I've often wondered if the link itself has ever been useful, considering the Home key on the keyboard exists.

I'm probably the only one that uses it.

href should never be blank.

Zach Leatherman

23 May 2010 at 01:04AM

"#" isn't blank, is it? Might be better to have a tag at the top with a more descriptive ID that you could point to, though.

And for people using a screen reader? Or are you happy not to accomdate accessability?

Zach Leatherman

05 May 2011 at 11:37PM

Hey Vince, any articles or evidence to support "Go to top" link usage from screen readers?

@Zach

The "go to top" link is an accessibility best practice. Here is an article from a journal that states "go to top" links are useful for screenreader usability:
http://portal.acm.org/citat...
(If you do not have ACM access, you can find a full version of the article via Google).

For most users, you are right. The links are irrelevant. My suggestion is to incorporate the links in aesthetically so they do not interfere with any of the primary tasks of sighted users.

I'm pretty sure I've never clicked a "back to top" link in the 8 years I've been using the internet, so I agree with your post.

I disagree. What if you have a super-long page and the user doesn't want to scroll for 10 seconds to get back to the top, or even drag the scrollbar?

Then what's easier, clicking a button, mouse-wheel scrolling, or click-and-dragging the scrollbar?

You could argue that one could use [HOME] button on the keyboard, but hardly anyone knows about that these days. Besides, the button does not work on all websites.