Scroll To Top Of Page Using jQuery

scroll-to-top-jquery-infotuts

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.

scroll-to-top-jquery-infotuts

LIVE DEMO   DOWNLOAD

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.

3 thoughts on “Scroll To Top Of Page Using jQuery”

Comments are closed.