Скрипт “подняться вверх” на CSS3 и jQuery для uCoz

Скрипт “подняться вверх” на CSS3 и jQuery для uCoz

Чем проще навигация на вашем сайте, тем удобнее им пользоваться. Сегодня все чаще в рунете можно встретить кнопку “подняться вверх”. Она обычно появляется в нижнем углу сайта при скролле и прячется, если страница прокручивается вверх.

Установка




1. В таблицу стилей вставляем код:

Код
.cd-top {  
background-color: rgb(51, 122, 183);  
bottom: 0px;  
color: rgb(255, 255, 255);  
display: inline-block;  
font-size: 18px;  
line-height: 24px;  
position: fixed;  
opacity: 0;  
right: 0px;  
text-align: center;  
text-decoration: none;  
-webkit-transform: scale(5) translate(47px,-10px);  
-moz-transform: scale(5) translate(47px,-10px);  
-o-transform: scale(5) translate(47px,-10px);  
-ms-transform: scale(5) translate(47px,-10px);  
transform: scale(5) translate(47px,-10px);  
-webkit-transition: all 0.3s ease-in-out;  
-moz-transition: all 0.3s ease-in-out;  
-o-transition: all 0.3s ease-in-out;  
-ms-transition: all 0.3s ease-in-out;  
transition: all 0.3s ease-in-out;  
visibility: hidden;  
white-space: nowrap;  
width: 100%;  
}  
.cd-top.cd-is-visible, .no-touch .cd-top:hover {  
-webkit-transition: all 0.3s ease-in-out;  
-moz-transition: all 0.3s ease-in-out;  
-o-transition: all 0.3s ease-in-out;  
-ms-transition: all 0.3s ease-in-out;  
transition: all 0.3s ease-in-out;  
}  
.cd-top.cd-is-visible {  
opacity: 0.9;  
-webkit-transform: scale(1) translate(0px,0px);  
-moz-transform: scale(1) translate(0px,0px);  
-o-transform: scale(1) translate(0px,0px);  
-ms-transform:scale(1) translate(0px,0px);  
transform: scale(1) translate(0px,0px);  
visibility: visible;  
}  
.cd-top.cd-is-visible:hover {  
color: rgb(255, 255, 255);  
opacity: 1;  
}  
.cd-top:hover {  
text-decoration: none;  
}  
.cd-top .fa {  
padding: 25px 25px;  
}  
.cd-top span:last-child {  
padding: 25px 8px;  
}  
@media (min-width: 768px) {  
.cd-top {bottom: 90px;  
width: auto;  
right: -158px;  
}  
.cd-top:hover {  
right: 0px;  
}  
.cd-top .fa {  
border-right: 1px solid rgb(71, 142, 203);  
}  
}

2. А этот код в нижнюю часть сайта:

Код
<a href="#0" class="back-to-top cd-top"><span class="fa fa-chevron-up"></span> <span>Поднятся на верх</span></a><script>  
$(window).scroll(function() {  
  ($(this).scrollTop() > ($('header').height() + 200)) ? $('.back-to-top').addClass('cd-is-visible') : $('.back-to-top').removeClass('cd-is-visible cd-fade-out');  
  }).trigger('scroll');  
  $(window).resize(function() {  
  var right = (($(window).width() - $('section').width())/2)+95;  
  if ($('nav.sidebar').hasClass('affix')) {  
  $('nav.sidebar').css('right', right+'px');  
  }  
  }).trigger('resize');  
  $('.back-to-top').on('click', function(event) {  
  event.preventDefault();  
  $('html,body').animate({  
  scrollTop: 0  
  }, 700);  
  });  
</script>


avatar

Кнопки для вашего сайта

Представляем вам набор кнопок для вашего сайта. Все они абсолютно разные. Их можно легко настроить под свой дизайн сайта. Можно выбрать размер, цвет, стиль.

Выделение кода при нажатии для uCoz

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

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