Click here to Skip to main content
11,496,146 members (939 online)
Click here to Skip to main content

Smooth Scroll to the Top of the Page – jQuery

, 13 Feb 2013 CPOL 33.5K 6
Create your own smooth scroll to the top button on any web page.
The site is currently in read-only mode for maintenance. Posting of new items will be available again shortly.
Smooth Scroll
Smooth Scroll

When content of a web page exceeds and visitors scroll down the web page, then having a button to smooth scroll to the top of the page is a good idea. jQuery scroll function made it very easy to create a such a button just by writing a few lines of code. jQuery scroll function is checking if the document is scrolled and is greater than a given value, then show the scroll to top button, if the page is not scrolled or scrolled to the top of the page, then hide the button.

By the end of this article you will be able to create your own smooth scroll to top button on any web page.

Smooth Scroll to the Top of the Page

HTML Code

The ID of the link element will be used to show the button and scroll to the top of the page.

<a href="#" ID="backToTop"></a>

CSS Code

The CSS code is displaying the button at the bottom-center of the page.

a#backToTop {
a#backToTop {
    width:40px;
    height:40px;
    opacity:0.5;
    position:fixed;
    bottom:5px;
    left:50%;
    display:none;
    text-indent:-10000px;
    outline:none !important;
    background-image: url('top.png');
    background-repeat: no-repeat;
}

jQuery Code

The jQuery code is checking if the value of the page scrolled down is greater than 50 then fadeIn() the button, when the button is clicked then scroll the page to the top and fadeOut() then button.

jQuery(document).ready(function($){
    $(window).scroll(function(){
        if ($(this).scrollTop() > 50) {
            $('#backToTop').fadeIn('slow');
        } else {
            $('#backToTop').fadeOut('slow');
        }
    });
    $('#backToTop').click(function(){
        $("html, body").scrollTop(0);
        return false;
    });
});

Scrolling Smoothly

To make a smooth scroll, we will use jQuery animate function and assign the speed to scroll to the top of the page.

jQuery(document).ready(function($){
    $(window).scroll(function(){
        if ($(this).scrollTop() > 50) {
            $('#backToTop').fadeIn('slow');
        } else {
            $('#backToTop').fadeOut('slow');
        }
    });
    $('#backToTop').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 500);
        return false;
    });
});

Resources

Demo

Scroll down the page and you will see the red up-arrow button at the bottom-center of the page.

The post Smooth Scroll To The Top of The Page – jQuery appeared first on Noor Ahmad Feroozi.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Noor Ahmad Feroozi
Software Developer (Senior) Ministry of Education
Afghanistan Afghanistan
No Biography provided
Follow on   Twitter   Google+

Comments and Discussions

 
GeneralGreat Example Pin
bandi.ramesh16-Feb-13 0:14
memberbandi.ramesh16-Feb-13 0:14 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web03 | 2.8.150520.1 | Last Updated 13 Feb 2013
Article Copyright 2013 by Noor Ahmad Feroozi
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid