Back to top

Hi guys,, hope you are aware of back to top button when you scroll down to end of page..right? so do you know how to implement that?? so far even i donno..but just now came to know the functionality now.. 😉 its very simple..thanx to crackerworld blog for teaching me :).

first of all make sure of jquery.min in your php file..

just follow the code

<!doctype html>
<html lang=”en”>
<head>
<meta charset=”utf-8″>
<title>Animated Scroll to Top</title>

<script type=”text/javascript” src=”js/jquery.min.js”></script>
<script>
$(document).ready(function(){

// hide #back-top first
$(“#back-top”).hide();

// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$(‘#back-top’).fadeIn();
} else {
$(‘#back-top’).fadeOut();
}
});

// scroll body to 0px on click
$(‘#back-top a’).click(function () {
$(‘body,html’).animate({
scrollTop: 0
}, 800);
return false;
});
});

});
</script>

<style>
body {
font: .88em/150% Arial, Helvetica, sans-serif;
margin: 30px auto;
}
h1 {
font: bold 80%/120% Arial, Helvetica, sans-serif;
text-transform: uppercase;
margin: 0 0 10px;
color: #999;
}
a {
color: #69C;
text-decoration: none;
}
a:hover {
color: #F30;
text-decoration:underline;
}
p {
margin: 0 0 10px;
}
em {
font: italic 100% “Times New Roman”, Times, serif;
}
#pagewrap {
margin: 0 auto;
width: 600px;
padding-left: 150px;
position: relative;
}

/*
Back to top button
*/
#back-top {
position: fixed;
bottom: 30px;
margin-left: -150px;
}
#back-top a {
width: 108px;
display: block;
text-align: center;
font: 11px/100% Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #bbb;
/* background color transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover {
color: #000;
}
/* arrow icon (span tag) */
#back-top span {
width: 108px;
height: 108px;
display: block;
margin-bottom: 7px;
background: #ddd url(up-arrow.png) no-repeat center center;
/* rounded corners */
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
/* background color transition */
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
}
#back-top a:hover span {
background-color: #777;
}
</style>
</head>
<body id=”top”>
<div id=”pagewrap”>
<h1>My Collection</h1>

some data to fill for atleast 2 pages..so that we can see the back to top button over there..
<p id=”back-top”>
<a href=”#top”><span>Back to Top</span></a>

</div>
</body>
</html>

Wanna download the example?? then its here… 😉