Adding a fixed "back to top" link on every page of your website

May 18th, 2009 at 8:08 am
filed under: Web Development / CSS
Comments (8)

Occasionally I get asked how to do the fixed "back to top" button in the lower right corner of my site on every page. This is very simple with PHP/CSS.

First you need to add a class to your stylesheet, this class will fix the image position in the bottom right;

.toplink {
position: fixed; 
bottom: 5px;
right: 5px;
}

You can play around with those numbers to position it exactly where you like. Now you need to add the top link, just below the opening <body> tag, put this in;

<a name="top"></a>

Now you need to add the image link, because we're fixing the position with CSS, you can really put this just about anywhere, but I stick it below the footer in it's own div so it will always show below all other content just in case. If you're using sNews, put this in the index.php file before the closing body tag;

<div>
<a href="<?php echo $_SERVER['REQUEST_URI']; ?>#top"><img src="images/arrow-up.png" class="toplink" alt="Back to top" title="Back to top"  /></a>
</div>

Now you just need to put the arrow-up.png image in your images folder and that's it, here are a few samples I just made, feel free to use them if you like.

  • Back to top image sample #1
  • Back to top image sample #2
  • Back to top image sample #3

Now you have a "back to top" link at the corner on every page, placed in the best position for quick access via your user's mouse pointer.

bookmark / share this: Bookmark and Share
rated 5/5 (2 votes)

CSS, PHP

8 comments

Add a new comment »

#1
slemborg slemborg said:
May 18th, 2009 at 9:05 am

Thanks for this Matt, and it's working as it should, I tried with some java:

but didn't really like it, so thanks again for sharring.


#2
Matt Matt said:
May 18th, 2009 at 1:21 pm

No problem slemborg,

Not sure if you were trying to post some javascript there as an example, but sNews eats anything in tags, as you may already know :)


#3
slemborg slemborg said:
May 18th, 2009 at 1:57 pm

Hehe, indeed I tried posting a simple java line, but nevermind that, cause all is working as it should now, thanks for refreshing my memory regarding this type o linking.


#4
Matt Matt said:
May 19th, 2009 at 8:36 am

Hmmm, you just gave me an idea for a new mod... letting people edit their comments, maybe for like the first hour or something. Could set a cookie with a token...


#5
slemborg slemborg said:
May 19th, 2009 at 11:28 am

Good idea, and with a timelimit maybe make a setting for how long or something, that could also help or atleast somewhat help against "doubleposting" kinda like it most forums.


#6
jesth jesth said:
May 8th, 2010 at 1:34 pm

Hi.

Usefull stuff, been trying to make one myself, however, went back to this one, and it's working nicely, I just have a few things, I never liked the #top in the link, how would I be able to make a back to top link, without it showing the http://mysite.com/#top ?


#7
Matt Matt said:
May 9th, 2010 at 7:33 am

Hi Jesth,

You can change "top" to something else, but it has to be something with a unique id, but the hash indicates it's within the same page, so you can't really get rid of it.


#8
jesth jesth said:
May 9th, 2010 at 9:03 am

Okay, thanks for the reply, by the way, is not validating in strict, so I removed <a name="top"></a>
and changed <body> to <body id="top"> which validates in strict.


Subscribe to comments feed

Write a comment

* = required field

:

:

:

:

You may insert urls in plain text, urls will be automatically linkified for trusted users and on seasoned posts only. All first comments are moderated, so use your email if you want to be remembered.


Back to top