GO TOP

HTML
<div class="scroll-top-wrapper ">
  <span class="scroll-top-inner">
    <i class="fa fa-lg fa-arrow-up"></i>
  </span>
</div>

css 

/*scroll*/
.scroll-top-wrapper {
    position: fixed;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    text-align: center;
    z-index: 99999999;
    color: #eeeeee;
    width: 50px;
    height:50px;
    line-height:40px;
    right: 30px;
    bottom: 30px;
    border-radius: 50px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    background-color:#13143F;   
}
.scroll-top-wrapper:hover {
    background-color:#EC2F30;
}
.scroll-top-wrapper.show {
    visibility: visible;
    cursor: pointer;
    opacity: 1.0;
}
.scroll-top-wrapper i.fa {
    line-height: inherit;
} 

js 

 <script type="text/javascript">
        /*scroll*/
        $(document).ready(function() {
          $(function() {
                $(document).on('scroll', function() {
                  if ($(window).scrollTop() > 100) {
                      $('.scroll-top-wrapper').addClass('show');
                  } else {
                      $('.scroll-top-wrapper').removeClass('show');
                  }
              });
             $('.scroll-top-wrapper').on('click', scrollToTop);
          });

          function scrollToTop() {
              verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
              element = $('body');
              offset = element.offset();
              offsetTop = offset.top;
              $('html, body').animate({
                  scrollTop: offsetTop
              }, 500, 'linear');
          }
       });
</script>