Scroll To Top of the page smoothly

With single web page designs coming into play, a very small effect but very effective Scroll to top becomes a necessity in every web page.  And it is always a good idea to use this option if the web page has lots of content because it becomes easy for the visitor to navigate easily.  You may get many plugins for this simple action, lot of people use them but they don't realize about the extra garbage they take in their code with those large scripts.

Here we are using verrrrry few lines for this action.  You need a button to click on to scroll the page to the top.  Here's the CSS for the button:

<style type="text/css">
        .scrollup{
    width:40px;
    height:40px;
    opacity:0.3;
    position:fixed;
    bottom:50px;
    right:100px;
    display:block;
    text-indent:-9999px;
    background: red;
}
    </style>

I am using a button initially it is invisible when scroll down the page that button gets appear.  As you can see position:fixed and display:none is used, a fixed position right at the bottom of the page.  Button will be visible only when the page is scrolled down otherwise invisible.

Here's the script:

<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>

HTML for the button:

<a href="#" class="scrollup">Scroll</a>

You can see the first few lines of the script, action is agains window scroll when scrollTop position is greater than 100 the button fades In and gets visible and when clicked the scrollTop:0 makes it scroll to the very top of the page, at 0px position, and the 600 is used for the duration of animation in milliseconds. Higher values indicate slower animations. You can also use ‘fast’, ‘slow’ or ‘normal’ instead of millisecond values.

Share Your Solutions!!