jQuery Scroll To Top

In this tutorial We will learn how to add a simple and  fancy cool scroll to top feature using jQuery.

Scroll to top is a very useful feature when you have a long page website. This make your website page scrolling easily.

Preparing HTML Step 1:

Add HTML code to display scroll to top image.

Add this code at bottom of webpage before </body> tag.

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

 

Preparing CSS Step 2:

Add CSS for class scrolltop. And also place a small arrow image scrolltop.png in images folder.

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

 

Preparing jQuery library Step 3:

Call jQuery Library.

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

 

Preparing jQuery code 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>

You have Done!!!

 

jQuery Scroll To Top