Smooth Page Scroll to Top with jQuery

File Size: 42.9 KB
Views Total: 34911
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Smooth Page Scroll to Top with jQuery

A smooth page scrolling effect for returning to the top of the page using jQuery that provides visitors with an easy way to quickly scroll to the top of the page.

How to use it:

1. Include jQuery Plugin

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

2. 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;
}

3. Markup

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

4. Call the function

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

This awesome jQuery plugin is developed by unknown. For more Advanced Usages, please check the demo page or visit the official website.