How to create Go To Top button in a Webpage ?

In this article we will be learning to create a Go To Top Button in our webpage. We will show a Go To Top button in our webpage if user is not in the top. On clicking the button, the user will be taken to the top of the webpage with smooth animation.


<div class="scrollTop" style="opacity:0;">
    <a href="javascript:;" class="go-to-top-icon"></a>


You can get the arrowTop image in PNG format here : arrowTop.png

        background:url("img/arrowTop.svg") no-repeat center center;
        display: block;
        background-size: 100%;
        border-radius: 50px;
        background-color: #000;
        position: fixed;
        bottom: 60px;
        right: 10px;
        z-index: 100;
        width: 25px;
        height: 25px;


        var topPos = $(this).scrollTop();
        if(topPos > 100){

        $("html, body").animate({

Follow this video for complete guidance :

Recommended For You

About the Author: Admin