11
Aug
2012

Simple jQuery Scroll To Top

Posted in: jQuery , No Comments

jquery_logo
In this tutorial We will learn how to add a fancy cool scroll to top feature using jQuery.
Scroll to top is a very useful feature when you have a long page to scroll. This make your website page scrolling easy and fancy.

Step 1:
Add HTML code to display scroll to top image.
Add this code at bottom of page before </body> tag.

<div class="scrolltop"></div>

Step 2:
Add CSS for class scrolltop. And also place a small arrow image scrolltop.png in img folder.

.scrolltop {
	display: none;
	background: url(img/scrolltop.png) no-repeat;
	width: 44px;
	height: 44px;
	position: fixed;
	right: 90px;
	bottom: 30px;
	cursor: pointer;
}

Step 3:
Call jQuery Library.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Step 4:
Now add following jQuery code.

<script type="text/javascript">
$(document).ready(function(){ 
$(window).scroll(function(){
if ($(this).scrollTop() > 80) {
$(".scrolltop").fadeIn('slow');
} 
else {
$(".scrolltop").fadeOut('slow');
}
});
$(".scrolltop").click(function(){
$("html, body").animate({ scrollTop: 0 }, 'slow');
});
});
</script>

Done!!!
Check live demo and download demo files.
Demo Download

About the Author

Name: Ravi Shekhar
I love learning and sharing web stuffs.

Share this post

Twitter Facebook Google Buzz Digg StumbleUpon Delicious Technorati

Leave a Reply