Effortless jQuery Floating Back-To-Top Script v2

I’ve made a simple script (Effortless jQuery Floating Back-To-Top) a month ago and one of my readers was wondering if I can make the button hidden and will just show if its scrolled down a bit. So, here it is. Enjoy Smile

HTML

place this inside the body of your web page. before the < /body > tag.

<div id="backtotop">
   <a href="#">
      <img src="your-image-folder/back_to_top_btn.jpg" border="0" alt="Back to TOP" />
   </a>
</div>

CSS

place this inside the head of your web page. before the < /head > tag.

<style type="text/css">
#backtotop {
	position: fixed;
	right:0px;
	bottom:15px;
	display:none;/*hid the button first*/
}
#backtotop a {
	text-decoration:none;
	border:0 none;
	display:block;
	width:31px;
	height:155px;
}
#backtotop a:hover {
	opacity:.8; /*mouse over fade effect*/
}
.clrb {
	clear:both;
}
#maindiv {
	width:700px;
	border:1px solid #999;
	margin:auto;
	padding:20px;
}
</style>

JS

place this inside the head of your web page. before the < /head > tag.

<!-- include jQuery Library -->
<script type="text/javascript" src="js/jquery.js"></script>
<!-- efforless script below -->
<script type="text/javascript">
	jQuery(document).ready(function(){
		var pxShow = 300;//height on which the button will show
		var fadeInTime = 1000;//how slow/fast you want the button to show
		var fadeOutTime = 1000;//how slow/fast you want the button to hide
		var scrollSpeed = 1000;//how slow/fast you want the button to scroll to top. can be a value, 'slow', 'normal' or 'fast'
		jQuery(window).scroll(function(){
			if(jQuery(window).scrollTop() >= pxShow){
				jQuery("#backtotop").fadeIn(fadeInTime);
			}else{
				jQuery("#backtotop").fadeOut(fadeOutTime);
			}
		});
		 
		jQuery('#backtotop a').click(function(){
			jQuery('html, body').animate({scrollTop:0}, scrollSpeed); 
			return false; 
		}); 
	});
</script>

Here’s what it looks like
Get it here

Like this Post?


December 4th, 2010

Filed under: Tutorials & Downloads

Post tags: • • •