Uncategorized

page scroll top button jquery

Smooth Page Scroll to Top with jQuery

February 21, 2012 jQuery 55 comments

If the web page has lots of content, its a good idea to provide visitors with an easy way to quickly scroll to the top of the page. In this tutorial, we will create smooth page scrolling effect for returning to the top of the page using jQuery.

We will create a button at a fixed position on the bottom right of the page, so that we once click it, it scrolls up with an nice animation rether than a page refresh or a straight jump to the top. We will make the button visible only if the page is scrolled down, instead of being always visible.

 

First, lets add the button link on the page, so that when it is clicked, we can scroll the page to the top.

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

Now we can add CSS to the above button link:

1
2
3
4
5
6
7
8
9
10
11
.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;
}

As you can see, we have defined fixed position for the button which is 100px from right and 50px from the bottom. I have used the text-indent to hide the text and display the icon for the button. The disply:none makes the button invisible initially.

Now we want to make the button visible if the page is scrolled down. We can do that with jQuery scroll event.

1
2
3
4
5
6
7
$(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.scrollup').fadeIn();
        } else {
            $('.scrollup').fadeOut();
        }
    });

The scrollTop gets the current vertical position of the scroll bar. If it is greater than 100px, it fades in the .scrollup button, otherwise fades out. So, when we scroll down the page more than 100px, the button should fade in, and if scroll up to the height of less than 100px it should fade out.

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

1
2
3
4
$('.scrollup').click(function(){
    $("html, body").animate({ scrollTop: 0 }, 600);
    return false;
    });

The scrollTop:0 scrolls to the very top of the page, at 0px position, and the 600 represents the duration of animation in milliseconds. The Higher values indicate slower animations. You can also use ‘fast’, ‘slow’ or ‘normal’ instead of milliseconds.

Here is complete jQuery Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s