Scroll ToTop (jQuery)

Praxistaugliches Beispiel aus alb-massage.de (mit font-awesome für das Icon).

HTML

<!-- totop -->
<div class="totop" style="display:none;">
  <a href="top"><i class="fa fa-angle-double-up fa-2x"></i></a>
</div>

CSS

.totop{
	padding: 0.25em 0.5em;
	display: block;
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 200;
	background-color: #333;
	background-color: rgba(0,0,0,0.5);
	border-radius: 5px;
}
.totop a{
	color: #FFF;
	display:block;
}

JavaScript

$(document).ready(function() {
  $('.totop').hide();
  $(window).scroll(function(){
    var value = 200; // Show at offset from x px 
    var scrolling = $(window).scrollTop();
    if (scrolling > value) {
      $('.totop').fadeIn();
    } else {
      $('.totop').fadeOut();
  }
});
$('.totop').click(function(){
  $('html, body').animate({scrollTop:'0px'}, 400);
    return false;
  });
});