Добавить на страницы HTML код: Я добавил в Нижнюю часть сайта
Код
<div id="polus"><span class="up_down"></span></div>
Добавить в CSS код: Код
#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;
}
Добавить .js код: Также добавил в Нижнюю часть сайта
Код
<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>