Adding a fixed "back to top" link on every page of your website
filed under: Web Development / CSS
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.
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.
8 comments
Add a new comment »Categories
Recent Entries
Recent Comments
- Dede (I checked it today in a shop. GT2 had some troubles with six ...)
- Matt (Bintang, You need to re-direct the url, try ...)
- jesth (Ohh.. why didn't I think of that, thanks alot.)
- Matt (Dede, I don't have Gran Turismo 2, any of the 2nd+ generation ...)
- Matt (Jesth, Just change the if condition, instead of looking for ...)
- jesth (Hi (again) Was wondering, is it possible to make it ...)
- Bintang Sembilan (Matt, thanks for your modd. I have apply it to my ...)
- Dede (Hello there. Can you check something for me? I want to buy ...)
- Matt (I think it's a driver issue Terrence, or it was a driver issue. ...)
Popular Entries
- Light-weight related articles mod for sNews 1.7 (4.5/5)
- Image / math hybrid captcha version 2, vastly improved (4.42/5)
- 1024x600 netbook wallpapers of Evangeline Lilly (4.4/5)
- Compact archives for sNews 1.7 (4.4/5)
- sNews Ajax Polls mod now available (4.38/5)
- Pretty date and comments bars in sNews CMS (4.35/5)
- Page caching mod for sNews 1.7 (4.33/5)
- Gravatar mod for sNews 1.7 (4.29/5)
- An improved tag cloud for sNews 1.7 (4.29/5)



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.
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 :)
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.
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...
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.
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 ?
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.
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.