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:

#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>

<link href="//" rel="stylesheet">

<script src="//"></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.