Simple "Scroll to Up" button with jQuery

toUp.html

<!--  
    CSS style to make the button stick to bottom of page
-->
<style>
  #toUp {
    position: fixed;
    right: 5px;
    bottom: 15px;
    display:none;
  }
  
/*  some more styling for round button, change it to whatever you wish  */
  .btn {
    width: inherit;
    display: inline-block;
    text-align: center;
    color: #fff;
    font-size: 1.6rem;
    line-height: 56px;
    text-decoration: none;
    background-color: #F44336;
    transition: .2s ease-out;
    cursor: pointer;
    overflow: hidden;
    z-index: 1;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    vertical-align: middle;
  }
</style>

<!-- 
    HTML: Add this anywhere on the page, the `i` tag will contain icon class or code.
-->

<a id="toUp" onclick="jQuery('html,body').animate({scrollTop:0},800);" class="btn red"><i class="up-arrow">UP</i></a>


<!-- 
    JS to toggle visibility of button on scroll
-->

<script type="text/javascript">
$(document).ready(function(){
  $(window).scroll(function(){
    if ($(this).scrollTop() > 200) {
      $('#toUp').fadeIn();
    } else {
      $('#toUp').fadeOut();
    }
  });
});
</script>