Scroll to top Using jQuery

The Scroll to top is used in many sites mostly in those sites in which have long content and make the user easy to go to back. So, in this lesson today I'll show you how to create a Scroll to top button for your site.

First include jQuery to your page then add the code:

HTML Code:

<button id="scrollup" >Scroll<br />to<br />Top<br /></button>

jQuery Script:

$(document).ready(function()

{ 

$('#scrollup').fadeOut('fast'); //Hide the Scroll to top button 

$(window).scroll(function() 

{ 

if ($(this).scrollTop() > 100) //Check if window is Scrolled bottom 

{ 

$('#scrollup').slideDown("slow"); //Show the Scroll to top button 

} 

else //When window is not Scrolled to bottom 

{ 

$('#scrollup').slideUp("slow"); // Hide Scroll to top button 

} 

}); 

$('#scrollup').click(function() 

{ 

$("html, body").animate({ scrollTop: 0 }, 600); //Scroll to top page on button Click 

return false; 

});

});