<div id="polus"><span class="up_down"></span></div>

#polus.up > .up_down {width: 15px;height: 15px;float: left;margin: 0px 27px 0px 27px;background: url('http://kanavas.at.ua/img/up_down.png');}  
#polus.down > .up_down {width: 15px;height: 15px;float: left;margin: 0px 27px 0px 27px;background: url('http://kanavas.at.ua/img/up_down.png') 0px -14px;}  
#polus.up, #polus.down {left: 0px;top: 80px;width: 70px;position: fixed;cursor: pointer;z-index: 9999;}  
/*animated*/
.animated {
  -webkit-animation-duration: .6s;
  animation-duration: .6s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}
@-webkit-keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translateY(-20px);
  transform: translateY(-20px);
  }

  100% {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
}

@keyframes fadeInDown {
  0% {
  opacity: 0;
  -webkit-transform: translateY(-20px);
  -ms-transform: translateY(-20px);
  transform: translateY(-20px);
  }

  100% {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  }
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown;
}
@-webkit-keyframes fadeInUp {
  0% {
  opacity: 0;
  -webkit-transform: translateY(20px);
  transform: translateY(20px);
  }

  100% {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
}

@keyframes fadeInUp {
  0% {
  opacity: 0;
  -webkit-transform: translateY(20px);
  -ms-transform: translateY(20px);
  transform: translateY(20px);
  }

  100% {
  opacity: 1;
  -webkit-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  }
}

.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}

<script>
var polusElem = document.getElementById('polus');  
var pageYLabel = 0;  
polusElem.onclick = function() {
var pageY = window.pageYOffset || document.documentElement.scrollTop;  
switch(this.className) {  
case 'up animated fadeInDown':  
pageYLabel = pageY;  
window.scrollTo(0, 0);  
this.className = 'down animated fadeInUp ';  
break;  
case 'down animated fadeInUp ':  
window.scrollTo(0, pageYLabel);  
this.className = 'up animated fadeInDown';  
}
}
window.onscroll = function() {  
var pageY = window.pageYOffset || document.documentElement.scrollTop;  
var innerHeight = document.documentElement.clientHeight;  
switch(polusElem.className) {  
case '':  
if (pageY > innerHeight) {  
polusElem.className = 'up animated fadeInDown';  
}  
break;  
case 'up animated fadeInDown':  
if (pageY < innerHeight) {  
polusElem.className = '';  
}  
break;  
case 'down animated fadeInUp ':  
if (pageY > innerHeight) {  
polusElem.className = 'up animated fadeInDown';
}  
break;  
}} </script>