usability 101: adding a global "back to top" to your site

November 11th, 2007

If there has to be one single usability issue I dislike from most sites, it is the "back to top" feature. Ugly links spread all over the place clogging the visuals of your site. It is for this reason that some months ago we developed a global unobtrusive back to top for Operator11.

identifying the problem

As we have seen before, long pages work. But we always have an issue in the process: if one wants to navigate to other section of the site you have to scroll all the way up or use your other hand to hit the [Home] key.
Given that the average internet user (I would say more than 90%) use their mouse to browse the web, either having to use your other hand and hunt for a key, scrolling up repetitively or clicking on that very top portion of that 16px wide scrollbar adds complexity to the task we are doing and decreases our efficiency.
Users love to hunt for information from page to page, and our task as user experience designers is to give them the tools to ease their stay.

the wrong approach

The classic solution of spreading links all over the place has great design, usability and accessibility problems.
From the design point of view you either come up with a clever way to disguise the links or just leave them out there clogging the visuals. Not good either way!
Usability wise, do you really know when the user wants to go back to the top of the page? Is there a need to spam the user with back to top links?
And that spamming also means for decreased accessibility, screen reader or keyboard users will be constantly spammed with those meaningless links. They already know how to get back to the top of the page without the need for your "shortcuts".
Shouldn't there be a wiser and cleaner solution?

developing a solution

Fortunately, there is a fairly good solution. And armed with a bit of javascript and standards compliant CSS we can pull the trick.
Did I just say javascript? why, yes! The back to top link is a navigational aid for mouse users and not real content in your page, think of it as an escape pod for when you want to get away from the current page.
When developing this together with Nicolas Sanguinetti for Operator11 our main goals were:
- keep it clean
- be unobtrusive
- keep it usable
The final solution ended as a tiny piece of code written with the aid of Prototype.
However as you may know, my personal and professional focus is into the mootools library and for this reason the solution presented today will be an adaptation from the original code.

methodology and code

Q: So when should we show the back to top link?
A: Once we think the user needs it.
Getting this metric can be a bit tricky and it's mostly arbitrary, but we finally settled for 80% of a full page scroll. It's around this point that we need at least two mouse wheel scrolls to reach the top and hitting the back to top link becomes more efficient.
the javascript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
window.addEvent('load', function(){
  new Element('span', {
    'id': 'back-to-top', 
    'styles': {'opacity': 0.6},
    'events': {'click': function() {
      if (window.location.hash) { window.location.hash = "page"; } 
      else { window.scrollTo(0, 0); }
    }}
  })
  .setText('back to top')
  .injectInside(document.body);
 
  window.addEvent('scroll', function() {
    var fn = window.getScrollTop() > (window.getHeight() * 0.8) ? "addClass" : "removeClass";
    $('back-to-top')[fn]('visible');
  });
});

and this simple CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#back-to-top,
#back-to-top.visible {
  display: none;
}
 
body>#back-to-top {
  position: fixed;
  bottom: 0;
  right: 0;
  cursor: pointer;
  padding: 3px 17px 3px 7px;
  font: bold 14px Arial, Helvetica, sans-serif;
  color: #fff;
  background: #555 url(triangle-gray-up.png) no-repeat right center;
}
 
body>#back-to-top.visible {
  display: inline;
}

pitfalls and caveats

Just a few notes on usage and explanation of the methodology are needed.
The code as you see purposely ignores IE6 as it has inexistent support for position: fixed. By using a CSS2 selector we gracefully degrade and ignore that browser and only display the link on standards compliant browsers.
There is also another issue with IE (6 and 7) that throws the infamous Operation aborted error and it's the reason behind using the onload event instead of ondomready.
Last, but not the least, removing the hash part in the URL reloads the page instead of just cleaning that part of the location. This happens *at least* in Firefox and it is enough to conclude that setting window.location.hash = "" is not an option. For this is that we check the existence of the hash in the current location, and if not present we scroll to the top with javascript or else we set the location to the topmost element in our page.
Be warned then, that if you use internal anchors in your site, you must have an element with an ID at the top of your page, preferably the body tag.
For the curious, we re-set the hash part just for bookmarking purposes. If you hit the back to top link, then you are supposedly at the top and not on #someplace in the page.

compatibility, download and legal bits

The code is tested and works under Firefox, Opera 9, Safari 3 (both Windows and Mac) and Internet Explorer 7.
As for mootools, you just need the "Element.Event" and "Window.Size" modules, pretty much standard stuff.

By the way, you should have already noticed the back to top link in action in this post, feel free to try it out before leaving your comments ;)

Download back-to-top.zip

License: Creative Commons Attribution-Share Alike 3.0

2009/02/27 – Update: The original code above was originally intended for mootools 1.11 (bleeding edge at that time in 2007), but given that 1.2 has been out for a long time I guess it's time for a quick update for mootools 1.2.x
I also took a few minutes to clean-up the CSS (no more CSS2 descendant rule to hide from IE6) and moved the "fixed" styles to the Element creation in the JS. Now all that remains in the CSS is the customization on font, color, padding and background. The effect now also uses a fade in tween if it's available in your custom Mootools build.
Download back-to-top for mootools 1.2.x [zip]

addendum: original Prototype code

Being that I was struck by a very strange bug in mootools 1.11 a lame overriding of the addEvent function by the Wordpress.com Stats plugin, I'm putting here also the original Prototype-based implementation either for comparison or just for those Prototype users out there:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
BackToTop = {
    initialize: function() {
        document.body.appendChild(
            BackToTop.link = new Element('span', {id: 'back-to-top'})
                .update("back to top")
                .setOpacity(0.6)
        );
        BackToTop.link.observe("click", BackToTop.onLinkClick);
        Event.observe(window, "scroll", BackToTop.onWindowScroll);
    },
    onLinkClick: function() {
        if (window.location.hash) {
            window.location.hash = "page";
        } else {
            window.scrollTo(0, 0);
        }
    },
    onWindowScroll: function() {
        if (document.viewport.getScrollY() > (document.viewport.getHeight() * 0.8)) {
            BackToTop.link.addClassName('visible');
        } else {
            BackToTop.link.removeClassName('visible');
        }
    }
};
Event.observe(window, 'load', BackToTop.initialize);

notice that this was first written to be a LowPro behaviour (and fitting more of Nicolas' coding style) but given the Operation Aborted bug in IE we reverted back to plain Event.observe from Prototype.

12 Responses to “usability 101: adding a global "back to top" to your site”

  1. Justin says:

    How about putting across the top of the browser like the iPhone? It would be more obvious, and somehow also less obtrusive.

  2. gonchuki says:

    May be it's just that I never got my hands on an iPhone or iPod Touch, but I never seen any video or screenshot about what you are talking about.
    do you have a link to enlighten me? :)

  3. Dave Wood says:

    Hi there,

    Thanks for the tips – I've been searching a way to do this for a while now. I would have thought this sort of technique would be more widely used.

    I'm pretty clueless when it comes to javascript, and was wondering if it's possible to use this code just to change the visibility of the backtotop div, rather than injecting the style and content in Javascript?

    Thanks for your help!

  4. gonchuki says:

    yes Dave, it's completely possible but as the "back to top" link has absolutely no semantic sense (it's a navigational aid as I said in the article) we are injecting the content with JS.

    If you want it your way, just remove lines 2 to 11 and put somewhere on your HTML the #back-to-top span.

  5. Dave Wood says:

    Thanks Gonchuki,

    I've got it! Like I said, I thought this idea would be more likely used.

    Thanks for the tutorial, and many thanks for your help,

    Woody.

  6. Jeeremie says:

    Thanks,

    I have seen something similar called "Para cada comentario, mato a un gatito" but like your script, this isn't working in IE6.

    As Justin mention is, it would be more obvious if it was on top of the page and less obtrusive. I would not notice the Backtotop link if you didn't mention it.

    Anyway, nice script. I just think it could be improved.

  7. Dunc says:

    Quite a nice idea.

    Would be good if you increased the contrast of the 'back to top' link on this blog though. You're obviously aware of blind users who use screen readers, but don't forget old, partially sighted or colour blind users where contrast between colours is very important.

  8. gonchuki says:

    remember that this is just a showcase on the idea, if anyone decides to implement this for their own site I bet they will end with a much better looking (and color/contrast aware) solution.

  9. Menno Tjoelker says:

    Hello.

    Thank you for this very useful script. It's a great idea!

    I made some small change to avoid the 'back to top' message to appear in print as well:
    - In the .css file, I surrounded everything by '@media screen { …} and at the end I added a section for printing':
    @media print{
    #back-to-top,
    #back-to-top.visible {
    display: none;
    }
    }
    - As the CSS file should now be used in case of printing as well, I removed 'media screen' from the HTML pages linking to it.

    Kind regards,

    Menno Tjoelker, EIndhoven, Netherlands

  10. Pandu says:

    How to insert downloaded code into my HTML file.

    Step by step instruction will be highly appreciated.

    regards,
    Pandu

  11. gonchuki says:

    @Pandu
    no instructions needed, just include the downloaded files in your page and you are done.
    You can also try with the updated version for mootools 1.2 as it needs just a single CSS selector to configure the appearance and all logic has been abstracted in the .js file.

  12. klaus Arends says:

    Thanks a lot … for the script.
    I had a back up button on Joomla realized with jquery.
    It gave me some conflicts with mootools modules…
    This is exactly the Solution i needed…
    Regards from Spain…

Leave a Comment