Help to animate Back to top button. Javascript or Jquery

Question

Good afternoon, I need to "animate" a Scroll to top button.

It’s already perfectly formatted in CSS, and it works (back to top), what I really need is for it not to appear when the page loads, but only after the page scrolls down a few pixels.

example of the site: https://codigofonte.com.br

Thanks for your help, I’m a beginner.

<a id='icon-smoothscroll-top' class="icon-smoothscroll-top" href="#top" alt="Voltar ao topo" > <title>Voltar ao topo</title> </a>

  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script type="text/javascript">

$(document).ready(function(){

    $(window).scroll(function(){
        if ($(this).icon-smoothscroll-top() > 100) {
            $('#icon-smoothscroll-topp').fadeIn();
        } else {
            $('#icon-smoothscroll-top').fadeOut();
        }
    });

    $('#scrollToTop').click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    }); 
});

</script>

@media (min-width: 992px){

    .icon-smoothscroll-top::before{
        font-family: icomoon; 
        content: '\e112';
         color: #ffffff;
         display: inline-block; 
         font-weight: 400; 
         font-size: 42px;
         border-radius: 33px;  
         background-color: #353535;
         position:fixed;
         text-align:center;
         opacity: .8;
         z-index:99;
         width:60px;
         height:60px; 
         line-height:44px;
         right:10px;
         bottom:50px;
         padding: 5px;
         text-decoration: none; 
         } 

     .icon-smoothscroll-top:hover::before {
         content: '\e112'; 
         color: #ffffff;  
         background-color: #000000;
         text-decoration: none;
     }

     .icon-smoothscroll-top a:hover::before{
        font-family: icomoon; 
        content: '\e112'; 
        color: #ffffff;
        text-decoration: none;
    } 
    }

Answer 1

Use the function scrollTop Jquery and check that the returned value is greater than the desired number of pixels.

$(document).ready(function() {

  $('#icon-smoothscroll-top').hide(); //Esconder o elemento após carregar o JQuery.

  $(window).scroll(function() {
    if ($(this).scrollTop() > 100) {
      $('#icon-smoothscroll-top').fadeIn();
    } else {
      $('#icon-smoothscroll-top').fadeOut();
    }
  });

  $('#scrollToTop').click(function() {
    $('html, body').animate({
      scrollTop: 0
    }, 800);
    return false;
  });

});

div {
  width: 200px;
  height: 1000px;
}

#icon-smoothscroll-top {
  position: fixed;
  bottom: 20px;
  right: 10px;
  width: 100px;
  padding: 5px 5px;
  color: white;
  background-color: purple;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<a id="icon-smoothscroll-top">Voltar ao Topo</a>
</div>