How To Add A Back To Top Link Using Elementor

<a title="Scroll back to top" rel="nofollow" href="javascript:void(0);" class="flexia-back-to-top" style="visibility: visible;">
  <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 492 492" style="enable-background:new 0 0 492 492;" xml:space="preserve"> <g> <g> <path d="M246.1,109.5c-7.2,0-14,2.8-19.1,7.8L7.9,336.5c-5.1,5.1-7.9,11.8-7.9,19s2.8,14,7.9,19L24,390.7c5.1,5.1,11.8,7.9,19,7.9 c7.2,0,14-2.8,19-7.9l184.1-184.1L430,390.5c10.5,10.5,27.6,10.5,38.1,0l16.1-16.1c5.1-5.1,7.9-11.8,7.9-19s-2.8-14-7.9-19 L265.2,117.3C260.1,112.2,253.3,109.5,246.1,109.5z"></path> </g> </g> </svg>
  <span class="screen-reader-text">Scroll back to top</span>
 </a>

.flexia-back-to-top {
    font-size: 20px;
    background: rgba(0,0,0,.5);
    color: #fff;
    border-radius: 3px;
    position: fixed;
    bottom: 30px;
    right: 30px;
    line-height: 40px;
    width: 40px;
    text-align: center;
    z-index: 10;
    transition: opacity .3s ease-in-out;
   opacity: 0;
}
.flexia-back-to-top.show_top{
  opacity: 1;
 }
.flexia-back-to-top svg {
    fill: #fff;
    height: 16px;
    width: auto
}
.flexia-back-to-top:visited {
    font-size: 20px;
    background: rgba(0,0,0,.5);
    color: #fff;
    border-radius: 3px;
    position: fixed;
    bottom: 30px;
    right: 30px;
    line-height: 40px;
    width: 40px;
    text-align: center;
    z-index: 10;
    transition: opacity .3s ease-in-out
}
.flexia-back-to-top:focus {
    background: rgba(0,0,0,.75);
    color: #fff
}
.flexia-back-to-top:hover {
    background: rgba(0,0,0,.75);
    color: #fff
}

jQuery('a.flexia-back-to-top').click(function() {
jQuery('html, body').animate({
      scrollTop: 0
}, 1000);
});
});
jQuery(window).on( 'scroll', function(){
if (jQuery(window).scrollTop() >= 500) {
    jQuery('a.flexia-back-to-top').addClass('show_top');
}else{
    jQuery('a.flexia-back-to-top').removeClass('show_top');
}
});