<div id="top">
  
</div>
<footer>
  <div class="btn-content">
    <a href="#top" class="top-back">
      <span class="bird">
        <i class="fas fa-crow fa-2x bird01"></i>
        <i class="fas fa-dove fa-2x bird02"></i>
      </span>
      <span class="top-back-btn"><i class="fas fa-angle-up icon-up"></i><br>
        Top</span>
    </a>
  </div>
</footer>

<!-- font awesomeの読み込み-->
<script defer src="https://use.fontawesome.com/releases/v5.4.1/js/all.js"></script>

#top {
  height: 800px;
}

footer {
  .btn-content {
    display: flex;
    justify-content: center;
    
    .top-back {
      display:flex;
      flex-direction: row-reverse;
      text-decoration: none;
      
      .bird {
        color: #FE9F8C;
        position: relative;
        
        .bird01,
        .bird02 {
          position: absolute;
          left: -110px;
        }
        
        &.fly {
          .bird01 {
            animation-name: bird-fly;
            animation-duration: 6s;
          }
        }
        
        .bird02 {
          opacity: 0;
        }
        
        &.fly {
          .bird02 {
            animation-name: bird-fly-on;
            animation-duration: 6s;
          }
        }
      }
      
      .top-back-btn {
        display: inline-block;
        transform: perspective(1px) translateZ(0);
        width: 50px;
        height: 50px;
        background-color: #7D9E3C;
        border-radius: 40px;
        color: #fff;
        text-align: center;
        line-height: 1.4;
        padding: 10px;
        
        .icon-up {
          transform: translateZ(0);
        }
        
        &:hover {
          .icon-up {
            animation-iteration-count: infinite;
            animation-name: iconUp;
            animation-duration: 0.75s;
            animation-timing-function: ease-out;
          }
        }
      }
    }
  }
}

@keyframes bird-fly {
  0% {
    transform: translate(0, 0);
  }
  5% {
    opacity: 0;
    transform: translate(0, -10);
  }
  100% {
    opacity: 0;
    transform: translate(0, -1000px);
  }
}

@keyframes bird-fly-on {
  0% {
    transform: translate(0, 0);
  }
  5% {
    opacity: 1;
    transform: translate(0, -10);
  }
  100% {
    opacity: 1;
    transform: translate(0, -1000px);
  }
}
View Compiled 
$(function(){
  $('.top-back').on('click', function(){
    $('.bird').removeClass('fly');
    $('.bird').addClass('fly').delay(3000).queue(function(next){
      $(this).removeClass('fly');
      next();
    });
  });
  $('a[href^="#top"]').click(function(){
    //var adjust = -110;
    var href= $(this).attr("href");
    var target = $(href == "#" || href == "" ? 'html' : href);
    var position = target.offset().top;

    $("html, body").animate({scrollTop:position}, {duration: 1300}, {easing: 'easeOutSine'});
    return false;
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js