Кнопка вверх/вниз для uCoz

Кнопка вверх/вниз для uCoz
Добавить на страницы 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>

Автор материала:
Логин на сайте:
Группа:
Дата входа:
О материале:
Дата добавления: 14.02.2016 в 11:40
Материал просмотрен: 1006 раз
Оставлены: 0 комментария
Рейтинг материала По мнению пользователей
0.0
Поделиться
Комментарии
0 комментариев
Статистика
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Онлайн никого нет

Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0