<a href=”#” class=”back-to-top”>
<span class=”glyphicon glyphicon-arrow-up” aria-hidden=”true”>     
</span>
</a>
     
   <style>
      .back-to-top {
        position: fixed;
        bottom: 2em;
        right: 0px;
        text-decoration: none;
        color: #000000;
        background-color: rgba(235, 235, 235, 0.80);
        font-size: 28px;
        padding: 1em;
        display: none;
        }
   
     .back-to-top:hover {   
        background-color: rgba(135, 135, 135, 0.50);
        }
   </style>
      
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js”></script>

 <script>
      jQuery(document).ready(function() {
        var offset = 220;
        var duration = 500;
        jQuery(window).scroll(function() {
            if (jQuery(this).scrollTop() > offset) {
                jQuery(‘.back-to-top’).fadeIn(duration);
            } else {
                jQuery(‘.back-to-top’).fadeOut(duration);
            }
        });
       
        jQuery(‘.back-to-top’).click(function(event) {
            event.preventDefault();
            jQuery(‘html, body’).animate({scrollTop: 0}, duration);
            return false;
        })
    });
</script>

Source: Using jQuery to add a dynamic “Back To Top” floating button with smooth scroll