Creating Scroll To Top Button Using jQuery

So, you do not have the scroll to top button in your site and desperately want it to be added in your site for the easy navigation of the user and came landed here as the help. Then, you have came in the right place. Here, we will describe it about how it need to be added in your site.

First of all, what you need to do is, you have to find out the unique id of the specific place of your site in which you want the scrolling to be added in your site. For this, you can look at the specific file and then find out the unique id of that place. For eg: here below, is the html code having the unique id for that specific div in our site:

<header id="masthead" class="site-header" role="banner">

Now, here the main thing which is needed is that, you need to add the unique id for the specific div, as in the above example, our unique id is #masthead. If you add this same id in other place on your site, then, scrolling option will not work properly, so, special care should be taken while creating it in your site. Also, this codes probably resides in the top of your site, ie, header area.

Now, if you have done the above mentioned work in your site, now, you need to apply in other place, for eg: in the footer area, the below html code.

<a href="#masthead" id="scroll-up"><i class="fa fa-arrow-up"></i></a>

Here, in the above code, what is done is, we have added the link to the id of masthead. By this way, clicking on this, since, this id already resides in your site, if done above provided process, then, it should directly navigate to that place, with no animation effect at all. So, this might be little annoying for you as you could not see any scrolling effect and see the direct jumping effect in your site.

So, now you want to add the scrolling effect for that scroll to top button in your site. For this, you need to write the custom js code like the one below:

jQuery('#scroll-up').hide();
jQuery(function () {
    jQuery(window).scroll(function () {
        if (jQuery(this).scrollTop() > 1000) {
            jQuery('#scroll-up').fadeIn();
        } else {
            jQuery('#scroll-up').fadeOut();
        }
    });
    jQuery('a#scroll-up').click(function () {
        jQuery('body,html').animate({
            scrollTop: 0
        }, 1000);
        return false;
    });
});

What we have done above is, first of all, we have added the CSS via jQuey script to hide the scroll to top button, with the code below:

jQuery('#scroll-up').hide();

Again, the code below is used to display the scroll to top button in your site, when the browser height is greater than 1000px when viewing your site. But, if you need the button to appear very quickly, you can change the value of 1000 as you require for your site.

jQuery(window).scroll(function () {
    if (jQuery(this).scrollTop() > 1000) {
        jQuery('#scroll-up').fadeIn();
    } else {
        jQuery('#scroll-up').fadeOut();
    }
});

Now, the final script code to make the animation work for scroll to top button comes up, which is below:

jQuery('a#scroll-up').click(function () {
    jQuery('body,html').animate({
        scrollTop: 0
    }, 1000);
    return false;
});

Here, what we have done is, we have added the clicking event for the button we have created already in the above steps to get animated as scrolling. Here, the timing of the scrolling is controlled via the code 1000. So, if you want to change that value according to your wish and site requirement, then, you can do it.

And, lastly, if you want to add some styling to that button for your site, then, you can paste the below CSS code in your style.css file of the theme or in anywhere you want, but, that file need to be connected in your site:

a#scroll-up {
    bottom: 20px;
    position: fixed;
    right: 20px;
    display: none;
    opacity: 0.5;
    filter: alpha(opacity=50); /* For IE8 and earlier */
}
a#scroll-up i {
    background-color: #222;
    color: #0099ff;
    font-size: 36px;
    padding: 8px;
    border-radius: 5px;
}
a#scroll-up:hover {
    opacity: 1;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}

Here, below is the screenshot on this when all of the above mentioned steps are done properly in your site:

Since, you now have the knowledge on creating the scroll to top button in your site, why not apply it and then create the smooth transition effect for the users of your site.