0

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. I now know that I could use animate() but don't know how to use it. Any idea how to do this? The current 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 have seen it animated before, but I don't know how to do it. 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 could need an answer of its own.

Christian Sirolli
  • 246
  • 1
  • 6
  • 18
  • 1
    https://stackoverflow.com/questions/16475198/jquery-scrolltop-animation – Sumit Ridhal Jun 17 '17 at 19:00
  • 3
    Possible duplicate of [jQuery .scrollTop(); + animation](https://stackoverflow.com/questions/16475198/jquery-scrolltop-animation) – Sumit Ridhal Jun 17 '17 at 19:00
  • @SumitRidhal the question you linked to already has the animation implemented, and they are trying to make it better. I am one step behind them: I don't have the animation implemented and I don't know how. – Christian Sirolli Jun 17 '17 at 19:05
  • 1
    Copy paste the code from the question and it should work. It animates the scrollTop – Omri Luzon Jun 17 '17 at 20:16

0 Answers0