Кнопка вверх/вниз для uCoz
827материалов
228тем на форуме
3004комментария
6161пользователь

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


Описание:

Кнопка "Вверх" и "Вниз" играет большую роль в улучшении удобства пользователя, особенно на тех страница которые сильно нагромождены контентом. А так как в настоящее время контент для сайта самое главное, то его на страницах, как правило, становится все больше и больше и самым лучшим способом перенаправить посетителя вверх или в низ страницы являются различные специальные кнопки, как сделать кнопку наверх/вниз для своего сайта мы рассмотрим можете ebltnm в данном материале.

Установка:

Данный код вставляете в нижнюю часть сайта:
Код
<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://webmaster-ucoz.ru/ucoz/img/up_down.png');}       
       #polus.down > .up_down {width: 15px;height: 15px;float: left;margin: 0px 27px 0px 27px;background: url('http://webmaster-ucoz.ru/ucoz/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>

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 01.08.2016 в 13:00
Материал просмотрен: 1712 раз
Категория материала: Скрипты для uCoz
К материалу оставлен: 1 комментарий

Пожаловаться
Сказать спасибо
Источник

1 комментарий


Hlebushek1
Hlebushek1 @Hlebushek1 23.02.2016 00:071
+1
Спасибо like like like
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта