subscribe-
Recent Posts
Archives
Categories
WEB PRINT MEDIA
I wanted to share a quick and simple tutorial with you which allows the user to have a quick means of getting back to the top of your web page without having to scroll of course this is very handy when the page is very large.
Firstly we will start with the HTML we need to give the main body tag an “ID”
<body id=”top”>
Ok for the next piece of HTML we will need to create the link itself this can be placed above the closing body tag
</body>
<div id=”top-link”><a href=”#top”>back to top</a></div>
Ok so that is the link sorted now just to place it where it needs to be we will do this using CSS:
#top-link a {
text-transform:uppercase;
-webkit-border-radius:5px;
-khtml-border-radius:5px;
-moz-border-radius:5px;border-radius:5px;
background:#F3F3F3;
position:fixed;display:block;
padding:3px;
bottom:5px;
right:5px;
color:#666;
text-decoration:none;
font-size:11px;
border:1px solid #CCC}
* html body #top-link {display:none}
And there you have it the link can be positioned where ever suits your design simply by editing the CSS file you download the source file here.
Thank you for this been looking how to do it.