» »

Кнопка с функцией вверх и вниз для uCoz


Кнопка с функцией вверх и вниз для uCoz

Сейчас кнопка, которая поднимает и опускает страницу, играет на сайте большую роль. Это безусловно удобность, и когда она не сильно выделяется, то это редкость, что можно увидеть на ресурсе. Просто она идет под фон сайта и видно только саму стрелку, но когда на ее наводишь, то она появляется. Здесь не просто идет замена, а одна уходит по своему эффекту в бок и к примеру с верху появляется другая.

Установка:

Этот код нужно поставить в низ сайта:

Код
<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://zornet.ru/ZORNET/drental/up_down.png');}  
  #polus.down > .up_down {width: 15px;height: 15px;float: left;margin: 0px 27px 0px 27px;background: url('http://zornet.ru/ZORNET/drental/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>


Работает не сказать что плавно, но очень удобно.
Источник: http://kanavas.at.ua/
25.02.2016 Просмотров: 436 Комментарий: (5)

Поделиться в социальных сетях

Материал разместил

Комментарий: 5
Сопрано
Сопрано 25.02.2016 19:591
0
Спасибо за кнопки, вообще нормально подошли, жаль, что только с левой неудобной стороны.
tsakonter
tsakonter 25.02.2016 20:192
0
Но не проблема перекинуть на правую сторону. Но по мне, лучше простой скрипт поставить, чем так скриптами нагружать низ сайта.
Kosten
Kosten 25.02.2016 20:443
0
Но на источнике можно посмотреть как эта кнопка работает.
Angerfist
Angerfist 25.02.2016 22:254
0
left меняем на right
Kosten
Kosten 25.02.2016 22:365
0
Точно, так и поменял, потом в стилях, подогнал как нужно.
avatar