You see these in plenty of places, especially with popular single page sites. A page where the menu is at the top in the header and as you scroll down a small “Back to top” link appears that whizzes you back to the top of the page and therefore back to the menu. Here’s a quick way I do it just using a bit of CSS, it might not work in every circumstance but it’s easy to do and can be modified quite easily.

I’ve put together a little demo page for this. (Yes the styles are in the head section but that’s just for easy demo purposes.) Nice and straight forward, grabbed some excerpts from fillerati.com and put together a basic page with some nav jump links using hashtags. Each excerpt is in a separate section with a related h1 tag with an id, it looks basically like this. The actual working of the HTML etc isn’t a big issue it’s just to put together something to demonstrate with.

  



  
Moby Dick



  
War of the worlds

We’ll add in a back to top link in the header, simply using the blank # to send us back to the top.

  
  Back to top

The way this will work is that we use fixed position to have the back to top link anchored to the window, we then use z-index to hide the back to top link behind the nav section but have it sit on top of content. So we have a z-index stacking like this

Nav – z-index 10
Back to top – z-index 5
Content – z-index 0

Now it’ll work fine with z-index 0, 1 and 2 but for some reason out of old habit I move z-indexes in increments of 5. There may well be no reason for this so please feel free not to do that, in fact if someone can think of any reason to do 5 increments please let me know.

So now we get onto the styling, in the demo the nav and the back to top spread across the page, at 100%, this isn’t necessary as long the nav covers the back to top link.

So we style the nav and header like so, just quickly spreading it across the full width of the window.

header{
  width:100%;
  margin:0;
  text-align:center;
}
nav{
  position:relative; //needed to make z-index work
  z-index:10;
  background:#ddd;
}
nav a{
  width:15%;
  display:inline-block;
  padding:0.5em;
}

We then add the back to top styling. Now I will note here that generally it is advised not to style on IDs however I make an exception here because there really should only be one of these links. Again feel free to do it different and style on a class or even an advanced selector.

#backToTop{
  position:fixed;
  top:0;
  z-index:5;
  background:#999;
  display:block;
  padding:0.5em;
  text-align:center;
  width:100%;
}

So as you’ll see on the demo page when you scroll down the page or click on one of the hashtag links and go down the page the back to top link reveals itself from underneath the main nav.

The last thing to do in this example is to take into account the way the hash links work. If you leave the headings to work normally then when you click a link to jump down the page you’ll see that it aligns with the top of the screen and the title is partly covered by the back to top link. So to account for this we add a bit of padding to the top of the target id, nice and straight forward.

h1{
  padding-top:2em;
}

As mentioned earlier you can style this up as you wish using the CSS, maybe reduce the back to top link to be a bit more smaller, sit to one side of the page, appear styled as a button, go mad with it. The main thing you’ll have to make sure of are that the main Nav hides the back to top link when the page is at the top.