Simple things with jQuery: Scroll to top

I’m toying with starting a little series on this blog called Simple things with jQuery. Essentially, this is because I see so many sites on the web using full-blown jQuery plugins for simple things. What I plan to do is, as I come across these things, try to find a simpler way to do things and then blog about it. First up, the good old scroll to top link.

Scroll to top

Most sites these days have a little link somewhere at the bottom of the page which takes the user back to the top of the page. This is a simple yet important piece of functionality, especially in this age of small screen browsing, where pages can become very long indeed.

The great thing about this piece of functionality is that it doesn’t require JavaScript to work. Just linking to the id of the body tag for example, will take you there when that link is clicked. Of course it adds the id to the end of the URL and is kinda jerky too.

Keep it smooth

What we want to do is smooth out this transition from the bottom to the top of the page. There are numerous plug-ins that enable you to do this, by linking to the plug-in and then calling the function somewhere on your page—but that is a lot of JavaScript for something this simple.

I too have been guilty of using a plug-in to achieve this but when I recently came across the native way to do this, I couldn’t believe I was using an HTTP request and downloading all of that code. So, here is the light and simple way to do this:

The Mark-up

As always, let us start with the mark-up for this. All you need is an id on your body tag and a simple link at the bottom of the page, linking to this id like so:

1
2
3
4
5
6
7
<body id="top">

  <!-- Page content goes here -->

  <a href="#top">Back to top</a>

</body>

As I said before, this will work straight out of the box, but it won’t be particularly smooth and also, we don’t want to add anything to the URL if we can help it.

The jQuery magic

The code required is so simple, you will kick yourself for ever using a plug-in to do this. I’ve added some comments to explain what the code is doing.

Note: It goes without saying that you should link to the jQuery library in your HTML document and also, include the example code in a file included after the jQuery library.

Also, you will need to wrap your code in the following statement:

1
2
3
4
5
$(document).ready(function() {

  // Your code will go here

});

Right, lets get to it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$(document).ready(function() {

  // Here, you select the anchor that links to your body id
  // and assign it to a click event
  $('a[href=#top]').click(function() {

    // This animates the scroll to
    // the ID referenced.
    // The '600' is the speed, measured in milliseconds
    $('#top').animate({scrollTop: 0},600);

    // We include this to prevent the links default behaviour
    return false;
  });

});

It really is that simple

That is all there is to it. No need to include a large plug-in which brings with it extra weight and an unnecessary HTTP request. I’d love to hear your thoughts in the comments and also if you think this can be simplified even more.