Click here to Skip to main content
Click here to Skip to main content
Technical Blog

Smooth Scroll to the Top of the Page – jQuery

, 13 Feb 2013 CPOL
Rate this:
Please Sign up or sign in to vote.
Create your own smooth scroll to the top button on any web page.
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
Over eight years of IT industry experience, and have been a part of design and development projects for many exceptional companies during those years, including Kabul Cyber Park, Alpha Omega Services, Ministry of Defense, Spacetech ICT Solutions, Ministry of Education and many others.
 
Technologies I use are standards-based XHTML, CSS, JavaScript, jQuery, PHP, ASP.Net, C#.Net, MS SQL, MySQL and SQLite. Each project I develop is built to be search engine and user friendly, using the latest development principles and techniques. To find out more about what I can do for you, check out my work at http://recentsolutions.net, or get follow me on http://twitter/naferoozi
Follow on   Twitter   Google+

Comments and Discussions

 
GeneralGreat Example Pinmemberbandi.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
Web02 | 2.8.1411023.1 | Last Updated 13 Feb 2013
Article Copyright 2013 by Noor Ahmad Feroozi
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid