Scroll To Top Of Page Using jQuery

I have seen various websites with scroll to top feature so that their visitors can easily navigate to top section of website with one click. Scroll to top feature is really necessary for websites having long length pages.  Well if you want to implement something like that then you can easily create it with jQuery. You can simply reference to the top of page but that might not look good so we use jQuery animate function to make the scrolling smooth and easy. Yes its really very easy to create and implement. You can check the live demo and scroll down the page to see a red up arrow. Click this red arrow and it will scroll you up to the top.

[button_round color=”blue” url=”infotuts.com/demo/scroll-to-top-jquery/”] LIVE DEMO [/button_round] [button_round color=”blue” url=”infotuts.com/demo/scroll-to-top-jquery/download.html”] DOWNLOAD [/button_round]

The main part is of jQuery and here’s the code:

</p>
$(document).ready(function(){
 $('.scroll_top').hide();
 $(window).scroll(function(){
 if ($(this).scrollTop() > 100) {
 $('.scroll_top').fadeIn();
 } else {
 $('.scroll_top').fadeOut();
 }
 });

 $('.scroll_top').click(function(){
 $("html, body").animate({ scrollTop: 0 }, 500);
 return false;
 });

 });
<p style="text-align: justify;">

In html part you need to have ‘scroll_top’ class:

<a href="#" class="scroll_top" />

If your website has long pages then you should surely implement this. Using CSS3 you can also give amazing effects to the scrolling. I will share that in future posts.