how to create scroll to the top of the page using jQuery CSS

Here i am writing code for How to create scroll to the top of the page using jQuery CSS in that article!

HTML code of scroll button

<a href="#" class="scrollToTop"><i class="fa fa-arrow-up" aria-hidden="true"></i></a>

CSS code for animate scroll button

    font-weight: bold;
    color: #ffffff;
    text-decoration: none;
    background: #9ba91a;
        border-radius: 50%;
        z-index: 9999;
.scrollToTop .fa-arrow-up{
    color: #ffffff;
    text-decoration:none !important;
        background: #000000;

JQuery code

The scrollTop() method sets or returns the vertical scroll-bar position for the selected elements. When the scroll-bar is on the top, the position is 0.
Below i am writing the jQuery code of this functionality, we will add a action on the scroll event to make the button appear when not at the top of the window and then make the button disappear when we are at the top of the page.

<script type="text/javascript">
    //Check to see if the window is top if not then display button
        if ($(this).scrollTop() > 100) {
        } else {
    //Click event to scroll to top
        $('html, body').animate({scrollTop : 0},800);
        return false;
About Author

My name is Mukesh Jakhar and I am a Web Application Developer and Software Developer, currently living in Jaipur, India. I have a Master of Computer Application in Computer Science from JNU Jaipur University. I loves to write on technology and programming topics. Apart from this, I love to travel and enjoy the beauty of nature.

Sign up for weekly update

Milkshake is almost ready. If you're interested in testing it out, then sign up below to get exclusive access.