Скрипт “подняться вверх” на 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

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

Шаблон Cleanliness HTML5 для uCoz

Современный плоский и адаптивный HTML5 CSS3 шаблон для uCoz. Cleanliness – это адаптация стороннего шаблона с другой CMS. Все элементы переведены и адаптированы качественно. Шаблон подойдет как для блогов, так и для каких-либо игровых и кино порталов. Также отлично подойдет для новостного сайта.

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