Zach’s ugly mug (his face)

Zach Leatherman

Trash that “Back to Top” Link

February 05, 2010

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.

Zach’s ugly mug (his face)

Zach is a Web Craftsperson with the award winning Filament Group. He’s currently fixated on web fonts and static site generators. His public speaking résumé includes talks in eight different countries at events like Beyond Tellerrand, Smashing Conference, CSSConf, and The White House. He also helps herd NEJS CONF and the NebraskaJS meetup. Read more about Zach »

8 Replies
    1. 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.
      1. jitendra vyas Disqus

        21 May 2010 at 02:15PM
        href should never be blank.
        1. Zach Leatherman Disqus

          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.
          1. Vince Rexerzon Disqus

            05 May 2011 at 10:39AM
            And for people using a screen reader? Or are you happy not to accomdate accessability?
            1. Zach Leatherman Disqus

              05 May 2011 at 11:37PM
              Hey Vince, any articles or evidence to support "Go to top" link usage from screen readers?
              1. @ZachThe "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.
                1. 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.
                  1. 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.
                    Webmentions