How to create Go to Top feature using jQuery?

jQuery is one of the most in-demand JavaScript libraries now a day. Enormous features have been developed and implemented by the veterans and programmers in jQuery for the websites and applications. 'Go to Top' is a very common feature from all of those developments. Usually you might have noticed an arrow pointing to top at very right bottom side.

So, I decided to develop a code in jQuery for you. I developed everything from the scratch without any help of any source. My teacher Mr. Ravi he helped me a lot in it and I hope you will like it.

So, I decided to develop a code in jQuery for you. I developed everything from the scratch without any help of any source. My teacher Mr. Ravi he helped me a lot in it and I hope you will like it.

 1. I created html file, within that file I put some links as well as paragraph in body section. I added [UP ARROW IMAGE ] LINK through <a href=”#”>.

<div id="header">

           <p>Go To Top Using jQuery </p>
           <p>Welcome To ADMEC </p></div>
           <div id="content">
             <div id="lit">Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Vivamus urna orci,
varius vel consectetur luctus, auctor eu velit. Suspendisse volutpat
metus in elit maximus, vel accumsan elit venenatis. Vestibulum nec
malesuada erat. Proin eu finibus felis. Maecenas laoreet turpis a
nunc cursus, bibendum tristique nisl ultrices. Mauris rhoncus orci
nec velit blandit vehicula quis nec nibh. Nulla vulputate imperdiet
volutpat. Phasellus vestibulum finibus finibus. Cras vitae nisi sed
tortor sollicitudin lobortis non a est. Mauris semper mi dolor, vel
ultricies elit vestibulum tristique. Proin laoreet ac libero quis
sodales. Proin tempus finibus suscipit. Nulla magna felis, imperdiet
lobortis aliquam sit amet, fermentum eu augue. Cras ultrices mauris
eu lorem malesuada gravida at in felis. Proin eu congue velit. 

</div>

                                                <div id="lit">Aenean justo nulla, aliquet in enim in, faucibus finibus orci. In at lacus volutpat, suscipit diam et, pulvinar odio. Curabitur vitae fermentum odio. Maecenas dictum suscipit libero vitae elementum. Praesent luctus metus eu erat iaculis, non pharetra sem pharetra. Vivamus neque odio, porttitor a magna quis, efficitur viverra dolor. Etiam sem dui, scelerisque vel diam id, egestas gravida lacus.
</div> 

                                                  <div id="lit">Maecenas ultrices bibendum viverra. Nullam aliquam auctor odio vitae tristique. Ut lobortis lobortis ligula et laoreet. Mauris malesuada, libero sit amet facilisis ultrices, elit elit pharetra nibh, sed sollicitudin sapien ligula ut lacus. Curabitur suscipit velit a turpis vulputate egestas. Donec turpis ipsum, volutpat at tortor nec, tincidunt imperdiet ex. Praesent et ex blandit, accumsan ante quis, iaculis nisi. Quisque sit amet dui consectetur, feugiat ipsum nec, aliquam lorem.
</div>

                                                 <div id="lit">Aliquam lacinia nibh et erat pretium ornare. Aenean nisi ipsum, fringilla non leo sed, accumsan facilisis justo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi faucibus purus tortor, quis convallis tortor hendrerit non. Nullam arcu dolor, venenatis nec lacinia eu, ultricies et est. Mauris vitae lobortis tellus. Sed scelerisque metus ac convallis ullamcorper. Nullam ultrices vel nisl sit amet ullamcorper. In mattis sapien odio, vulputate convallis nisl suscipit nec. Etiam vehicula rhoncus urna ac suscipit. Ut vehicula quis nunc sit amet volutpat. In vitae metus id sapien porttitor sollicitudin non porta metus. Proin quis aliquet nisi, a finibus ante. Nullam ut lacus sit amet mauris condimentum efficitur. Suspendisse potenti. Mauris luctus odio a turpis vulputate, vitae fringilla augue convallis
</div>

            </div>

  </div>

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

2. I added some CSS also.

<style type="text/css">

           #header{
                border: dotted 2px;
                height: 150px;
                text-align: center;
                color: blue;
                margin: auto;
                font-size: 28px;
                font-weight: bold;
                margin-bottom: 30px;
  }
                
           a{  text-decoration:none; }
           .scroll_top{
                        width:50px;
                        height:50px;                    
                        position:fixed;
                        bottom:40px;
                        right:80px;
                        background: url('go_top_icon.png') no-repeat;
                }
        
           #content{
                text-align: center;
                font-size:24px;                
           }
           #lit{
                height: 40px;
                margin: auto;;
                width:900px;
                border: solid 1px;
  }

      </style>

3. I have used Library Link of jQuery in the <head> of the page. [http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"]

4. I have declared function within <script type="text/javascript"> </script>. Always put your JavaScript just before your closing body (</body>) to load your page faster.  
<script type="text/javascript">
        $(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;
            });
        });
    </script>         

In above mentioned jQuery Code $('.scroll_top').hide(); here .scroll_top is being hidden through hide() api which is defined in jQuery library.

Then I passed the function $(window).scroll(function(){}); within that function I passed the if else condition using jQuery API fadeIn() and fadeOut(). It helped in showing the arrow only when some one scrolls down the page.

At last I called the click(function()) on the event which has scroll class attached to it and inside this function I passed a parameter (html) with animate API. when I click the UP Arrow Button It will scroll the entire page Up.

The designing of title in animated videos represents the first impression to the audience and it's called right key to get the audience in the right mood for your work and skill.