Scroll to Top - using jQuery

Hi friends, Now we are going to look about how to using scroll to top(images) by using jQuery. If the website has lot of contents in a single page which is useful and easy for users to scroll up to the top page by using some smooth effects. Lets start our code.

First of all we create a image icon and fixed it in bottom right corner of the page.

First put the following html code in your footer area.

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

Then we link up with the css.

.scrollup{

    width:40px;

    height:40px;

    opacity:0.3;

    position:fixed;

    bottom:50px;

    right:100px;

    display:none;

    text-indent:-9999px;

    background: url('icon_top.png') no-repeat;

}

You can see in the above css that we fixed icon at the bottom.

Now do some jquery functions on your head area of the html.

$(window).scroll(function(){

        if ($(this).scrollTop() > 100) {

            $('.scrollup').fadeIn();

        } else {

            $('.scrollup').fadeOut();

        }

    });

The next step is for scrolling to the top smoothly, if the button is clicked. We can do use the click function for that.

$('.scrollup').click(function(){

    $("html, body").animate({ scrollTop: 0 }, 600);

    return false;

    });

Thats is it, You can test this code in your localhost.

This is complete jQuery code :

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

For Icon Image Download : Click here

Notes :

Don't forget to add the following code in your head tag or else it does not work.

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

Thanks for reading.

Updating Sources : gazpo blog.