<style>

/********************

BACK TO TOP BUTTON

********************/

.tcb-top {

 position: fixed;

 bottom: 25px;

 right: 0;

color:#fff;

 -webkit-transform: translateX(100%);

 -moz-transform: translateX(100%);

 -ms-transform: translateX(100%);

 -o-transform: translateX(100%);

 transform: translateX(100%);

 background: #222;

 -webkit-transition: all 0.3s ease, -webkit-transform 0.5s 0.3s ease;

 -moz-transition: all 0.3s ease, -moz-transform 0.5s 0.3s ease;

 transition: all 0.3s ease, transform 0.5s 0.3s ease;

 text-transform: uppercase;

 padding: 10px 10px 10px 0;

 opacity: 0;

 visibility: hidden;

 font-weight: bold; }

 .tcb-top-visible {

 opacity: 0.5;

 visibility: visible; }

 .tcb-top-fadeIn, .tcb-top:hover {

 opacity: 1;

 -webkit-transform: translateX(0);

 -moz-transform: translateX(0);

 -ms-transform: translateX(0);

 -o-transform: translateX(0);

 transform: translateX(0); }

 .tcb-top:before {

 content: ”;

 position: absolute;

 height: 100%;

 width: 50px;

 right: 100%;

 top: 0;

 background: #222 url(https://imgh.us/tcb-direction.svg) no-repeat center 50%;

 background-size: 20px; }

</style>

<a href=”#top” class=”tcb-top”>Top</a>

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js”></script>

<script>

jQuery(document).ready(function($){

 // duration of animation while going back to top

 var back_duration = 600,

 // scroll position after which ‘back to top’ button will be visible

 back_offset = 800,

 // store ‘back to top’ element in variable for easy access

 back_button = $(‘.tcb-top’);

 // animate back to top

 back_button.on(‘click’, function(e){

 e.preventDefault();

 // running jQuery animate function of

 $(‘body,html’).animate({

 scrollTop: 0 ,

 }, back_duration

 );

 })

 // making button direction aware

 var lastScrollTop = 0, delta = 5;

 $(window).on(‘scroll’, function(){

 var scrollTop = $(this).scrollTop();

 if( Math.abs(scrollTop – lastScrollTop) <= delta) return false;

 // show button after offset value

 ( scrollTop > back_offset ) ? back_button.addClass(‘tcb-top-visible’) : back_button.removeClass(‘tcb-top-visible’);

 // check if scrolling down

 if(scrollTop > lastScrollTop){

 back_button.removeClass(‘tcb-top-fadeIn’);

 } else {

 // scrolling up? if yes make it fadeIn

 (back_button.hasClass(‘tcb-top-visible’)) ? back_button.addClass(‘tcb-top-fadeIn’) : back_button.removeClass(‘tcb-top-fadeIn’);

 }

 lastScrollTop = scrollTop;

 });

});

</script>