Cacher is the code snippet organizer for pro developers

/********************************************
FOOTER Back to top
********************************************/

// BTT button only using CSS
.cd-top {
  display: inline-block;
  z-index: 9999;
  height: 40px;
  width: 40px;
  position: fixed;
  bottom: 20px;
  right: 20px;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  visibility: hidden;
  box-sizing: border-box;
  border-radius: 50%;
  transform: translatez(0);
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  text-indent: 100%;
  background-color: rgb(255, 255, 255);
  // box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
  box-shadow: 0 4px 6px rgba(50, 50, 93, 0.12), 0 1px 3px rgba(0, 0, 0, 0.12);

  &:after {
    position: absolute;
    box-sizing: border-box;
    content: "";
    width: 12px;
    height: 12px;
    top: 50%;
    margin-top: -3px;
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    border-top: 1px solid #000;
    border-left: 1px solid #000;
    left: 14px;
    margin-top: -1px;
  }
} // end BTT button only using CSS

.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  -ms-transition: opacity .3s 0s, visibility 0s .3s;
   -o-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 0.3;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: 0.6;
}
.no-touch .cd-top:hover {
  opacity: 1;
}
@include tab-wup {
  .cd-top {}
}
// end Back to top

/********************************************
FOOTER Back to top
********************************************/
// BTT button using image
.cd-top {
  display: inline-block;
  z-index: 9999;
  height: 50px;
  width: 50px;
  position: fixed;
  bottom: 20px;
  right: 20px;

  // box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  // -webkit-border-radius: 50px;
  // border-radius: 50px;

  /* image replacement properties */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: url(../images/arrow.svg) no-repeat center center;
  -webkit-background-size: 40px 40px;
       -o-background-size: 40px 40px;
          background-size: 40px 40px;
  -webkit-transform: rotate(180deg);
     -moz-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
       -o-transform: rotate(180deg);
          transform: rotate(180deg);
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  -ms-transition: opacity .3s 0s, visibility 0s .3s;
   -o-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;

	  @include tab-wup {
	  -webkit-background-size: 50px 50px;
	       -o-background-size: 50px 50px;
	          background-size: 50px 50px;
	  }
} // end BTT button using image

.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  -ms-transition: opacity .3s 0s, visibility 0s .3s;
   -o-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible {
  /* the button becomes visible */
  visibility: visible;
  opacity: 0.3;
}
.cd-top.cd-fade-out {
  /* if the user keeps scrolling down, the button is out of focus and becomes less visible */
  opacity: 0.6;
}
.no-touch .cd-top:hover {
  opacity: 1;
}
@include tab-wup {
  .cd-top {}
}

/* Back to top */

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

  // browser window scroll (in pixels) after which the "back to top" link is shown
  var offset = 300,
    //browser window scroll (in pixels) after which the "back to top" link opacity is reduced
    offset_opacity = 1200,
    //duration of the top scrolling animation (in ms)
    scroll_top_duration = 700,
    //grab the "back to top" link
    $back_to_top = $('.cd-top');

  //hide or show the "back to top" link
  $(window).scroll(function(){
    ( $(this).scrollTop() > offset ) ? $back_to_top.addClass('cd-is-visible') : $back_to_top.removeClass('cd-is-visible cd-fade-out');
    if( $(this).scrollTop() > offset_opacity ) { 
      $back_to_top.addClass('cd-fade-out');
    }
  });

  //smooth scroll to top
  $back_to_top.on('click', function(event){
    event.preventDefault();
    $('body,html').animate({
      scrollTop: 0 ,
      }, scroll_top_duration
    );
  })

}); // end Back to Top

<!-- Back to top -->
<a href="#0" class="cd-top" title="Back to top">Top</a>