In this tutorial, you will learn that how to add scroll to top in any of the page. As we see in many websites the scroll top function. Its very helpful for users to go to the top of the page automatically without scrolling. It appears when the person scroll down the page and disappear when the visitor is already on the top of the page.

You can do this by applying some JavaScript code and CSS code .

Here is the JavaScript code you can use for scroll to top ->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script>
$(document).ready(function(){  
    //fade in/out based on scrollTop value
    $(window).scroll(function () {
        if ($(this).scrollTop() > 0) {
            $('#scroller').fadeIn();
        } else {
            $('#scroller').fadeOut();
        }
    });
 
    // scroll body to 0px on click
    $('#scroller').click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 400);
        return false;
    });
});
</script>

This is the CSS code below for the scroll to top button.

<style>
#scroll{
    position: fixed;   
    /**position the scroller**/
    bottom: 30px;  
    /**arrow image**/
    background: transparent url(put scoll top png url) no-repeat left top; 
    width: 32px;
    height: 32px;
    cursor: pointer;
    /**hide it first**/
    display:none;
}
</style>