* {margin:0;padding:0;}
.main {
  height :3000px;
    background: linear-gradient(#fff, #f7e486);
}
#to-top {
  width: 80px;
  height: 80px;
  position: fixed;
  right: 20px;
  bottom: 20px;
  background-color: #3A342E;
  color: #fff;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 10px #CDCCAA;
}

  $('#to-top').hide();
$(function(){
      $(window).scroll(function(){
        let scl = $('html,body').scrollTop();
        // console.log(scl);
        if(scl > 600){
          $('#to-top').fadeIn();
        }else{
          $('#to-top').fadeOut();
        }
      });
      $('#to-top').on('click',function(){
        $('html, body').animate({scrollTop:0});
      });
    });