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

Adding a fixed

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>

WARNING, make sure you properly sanitize the $_SERVER['REQUEST_URI'] variable, such as with the cleanXSS function if you're using sNews, i.e.

cleanXSS($_SERVER['REQUEST_URI']);

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.

Tags

 

Comments


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.


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


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.


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...


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.


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 ?


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.


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.


that's exactly what I was looking for...


hi there, thanks for all. It us working very fine. Changed <body> to <body id="top"> as jesth and changed <?php echo $_SERVER['REQUEST_URI']; ?>#top" to a real URL>#top , cause got error codes, that the site could not be found on the server. But after all I am very satisfied... Great stuff I long searched for and this IS WORKING ...

Comments are closed. No new comments allowed.

Copyleft 2002 - 2017 Matt Jones
Hand crafted with HTML5 & CSS3
↑ Back to top