How to Make scrollTop Gradual

I have been working on making a website look neater and better. I added a button that scrolls the page back to the top. However, it does it instantly and I would like to have it do this gradually. Any idea how to do this? The code for it is below:

$(document).ready(function(){
    $("#return-top").click(function(){
        $(".wsb-canvas-page-container").scrollTop(0);
    });
});
#return-top {
    position: fixed !important;
    bottom: 100px !important;
    right: 20px !important;
    background: rgb(136, 0, 0) !important;
    background: rgba(136, 0, 0, 0.7) !important;
    width: 50px !important;
    height: 50px !important;
    display: block;/**DO NOT PUT `!important`!**/
    text-decoration: none !important;
    -webkit-border-radius: 35px !important;
    -moz-border-radius: 35px !important;
    border-radius: 35px !important;
    /****display: none;/**DO NOT PUT `!important`!**/
    -webkit-transition: all 0.3s linear !important;
    -moz-transition: all 0.3s ease !important;
    -ms-transition: all 0.3s ease !important;
    -o-transition: all 0.3s ease !important;
    transition: all 0.3s ease !important;
    border: white 4px solid;
}
#return-top i {
    color: #fff !important;
    margin: 0 !important;
    position: relative !important;
    left: 16px !important;
    top: 13px !important;
    font-size: 19px !important;
    -webkit-transition: all 0.3s ease !important;
    -moz-transition: all 0.3s ease !important;
    -ms-transition: all 0.3s ease !important;
    -o-transition: all 0.3s ease !important;
    transition: all 0.3s ease !important;
}
#return-top:hover {
    background: rgb(0, 0, 0) !important;
    background: rgba(0, 0, 0, 0.9) !important;
}
#return-top:hover i {
    color: #fff !important;
    top: 5px !important;
}
<a href="javascript:" id="return-top"><i class="icon-chevron-up"></i></a>


<!-- ICON NEEDS FONT AWESOME FOR CHEVRON UP ICON -->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

I don't know how to make it animated, but I know it is possible. I have seen it before. This question was identified as a possible duplicate of another question. However, I (having very minimal knowledge of JavaScript and JQuery) don't understand how to apply the information therein. Thus this current question would need an answer of its own.