How to Add Auto scrollup button to the page

                                  

                                               In some website you design that contain large height dew to the large amount of data, so this provide some difficulty to the user to scroll from bottom to top . Here include
 some code for add autoscroll up button to the html page.

* Add below code to the head section.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <link href='http://fonts.googleapis.com/css?family=Vollkorn' rel='stylesheet' type='text/css'>   
        <link rel="stylesheet" type="text/css" href="style.css" />               
        <script type="text/javascript">
            $(document).ready(function(){
           
            $(window).scroll(function(){
                if ($(this).scrollTop() > 100) {
                    $('.scrollup').fadeIn();
                } else {
                    $('.scrollup').fadeOut();
                }
            });
           
            $('.scrollup').click(function(){
                $("html, body").animate({ scrollTop: 0 }, 600);
                return false;
            });

        });
        </script>


* Add the code in the body to implement auto scrollup.
  
<a href="#" class="scrollup">Scroll</a>     

** In the head section we refer style.css . so copy below code and save it as style.css.

html, body, ul, ol, li, form, fieldset, legend{
            margin: 0;
            padding: 0;
        }

        h1, h2, h3, h4, h5, h6, p { margin: 0; }
       
       
        body{font-family: 'Droid Sans', sans-serif;background:#eee;color:#888;padding:0;margin:0;font-size: 72.5%; }
               
        p{
            margin-bottom:15px;
        }
       
        h2{
            text-align:center;
            font-size:32px;
            font-weight:400;
        }
       
        h4{
            text-align:center;
            font-size:18px;   
            font-weight:400;           
        }
       
        #wrap{
           
            width:960px;
            margin:0 auto;
        }
       
        #content{
            background:#fff;
            padding:10px 15px;
           
        }
       
        #header{
            margin-bottom:20px;
        }
        #footer{
            text-align:center;
        }
       
        .scrollup{
            width:40px;
            height:40px;           
            text-indent:-9999px;
            opacity:0.3;
            position:fixed;
            bottom:50px;
            right:100px;
            display:none;           
            background: url('top.PNG') no-repeat;
        }
     you can add any image you want to represent the auto scroll button at background:url('up picture')