<div class="apotopscrollpanel" title="Вверх">
  <div class="aposcrollarrow0"></div>
  <div class="aposcrollarrow1"></div>
  <div class="aposcrollarrow2"></div>
  <div class="aposcrollarrow3"></div>
  <div class="aposcrollarrow4"></div>
</div>

<script>
  document.onscroll = function() {
  if($('head').offset().top > 100) {
  $('.apotopscrollpanel').fadeIn(300);
  } else {
  $('.apotopscrollpanel').fadeOut(100);
  };
};

$(function() {
  $('.apotopscrollpanel').click(function() {
  $('html,body').animate({scrollTop: 0}, 300);
  });  
});
</script>

.apotopscrollpanel div {
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.apotopscrollpanel:hover .aposcrollarrow0 {
  margin-top:45px;
}
.apotopscrollpanel:hover .aposcrollarrow1 {
  margin-top:40px;
}
.apotopscrollpanel:hover .aposcrollarrow2 {
  margin-top:25px;
}
.apotopscrollpanel:hover .aposcrollarrow3 {
  margin-top:15px;
}
.apotopscrollpanel:hover .aposcrollarrow4 {
  margin-top:7px;
}
.apotopscrollpanel {
  position: fixed;
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 50px;
  bottom: 0px;
  left: 0px;
  z-index: 50;
  cursor:pointer;
  display:none;
}
.aposcrollarrow0 {
  width: 70%;
  margin-left: -40%;
  border-style: solid;
  border-width: 0 40px 50px 40px;
  border-color: transparent transparent #949494 transparent;
  position: absolute;
  left: 50%;
  margin-top:40px;
  z-index: 55;
}
.aposcrollarrow1 {
  width: 54%;
  margin-left: -32%;
  border-style: solid;
  border-width: 0 40px 50px 40px;
  border-color: transparent transparent #D1D1D1 transparent;
  position: absolute;
  left: 50%;
  margin-top:30px;
  z-index: 55;
}
.aposcrollarrow2 {
  width: 34%;
  margin-left: -22%;
  border-style: solid;
  border-width: 0 40px 50px 40px;
  border-color: transparent transparent #E0E0E0 transparent;
  position: absolute;
  left: 50%;
  margin-top:20px;
  z-index: 55;
}
.aposcrollarrow3 {
  width: 16%;
  margin-left: -13%;
  border-style: solid;
  border-width: 0 40px 50px 40px;
  border-color: transparent transparent #F3F3F3 transparent;
  position: absolute;
  left: 50%;
  margin-top:10px;
  z-index: 55;
}
.aposcrollarrow4 {
  width: 0;
  margin-left: -5%;
  border-style: solid;
  border-width: 0 40px 50px 40px;
  border-color: transparent transparent #FFFFFF transparent;
  position: absolute;
  margin-top: 0px;
  left: 50%;
  z-index: 55;
}