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;
        });
  1. 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.


< Newer
CSS 3 Text: A Tale of writing-mode Woe
Older >
The 24 Clock on ALARMd

Zach Leatherman IndieWeb Avatar for https://zachleat.com/is a builder for the web at IndieWeb Avatar for https://cloudcannon.com/CloudCannon. He is the creator and maintainer of IndieWeb Avatar for https://www.11ty.devEleventy (11ty), an award-winning open source site generator. At one point he became entirely too fixated on web fonts. He has given 79 talks in nine different countries at events like Beyond Tellerrand, Smashing Conference, Jamstack Conf, CSSConf, and The White House. Formerly part of Netlify, Filament Group, NEJS CONF, and NebraskaJS. Learn more about Zach »

8 Comments
  1. Jordan Disqus

    10 Feb 2010
    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.
  2. jitendra vyas Disqus

    21 May 2010
    href should never be blank.
  3. Zach Leatherman Disqus

    23 May 2010
    "#" 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.
  4. Vince Rexerzon Disqus

    05 May 2011
    And for people using a screen reader? Or are you happy not to accomdate accessability?
  5. Zach Leatherman Disqus

    06 May 2011
    Hey Vince, any articles or evidence to support "Go to top" link usage from screen readers?
  6. Andrew Disqus

    02 Jul 2011
    @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.
  7. Andrew Disqus

    04 Sep 2011
    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.
  8. Geoff Disqus

    19 Jul 2013
    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.
Shamelessly plug your related post

These are webmentions via the IndieWeb and webmention.io.

Sharing on social media?

This is what will show up when you share this post on Social Media:

How did you do this? I automated my Open Graph images. (Peer behind the curtain at the test page)