Smooth Page Scroll to Top with jQuery

Smooth Page Scroll to Top with jQuery
File Size: 42.9 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: Free for personal use
   

How to start using jQuery?

More in this category...

View our Recommended Plugins

TOP 100 jQuery Plugins 2013

A smooth page Scroll/'>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>

For more Advanced Usages, please check the demo page or visit the official website.