вРазные полезности

Как сделать кнопку "Вверх" для сайта на uCoz

Сегодня я покажу вам как самостоятельно сделать кнопку "Вверх" для uCoz сайта. После пролистывания страницы вниз с правой или левой стороны вы увидите появившуюся кнопку "Наверх" при нажатии на которую произойдет плавное прокручивание страницы вверх.

Я хочу предложить вам сразу несколько вариантов оформления кнопки "Вверх", а какую устанавливать вы выберите сами.

Как обычно — первые варианты самые легкие, они выводят обычную кнопку без надписи и других эффектов.

Способ 1. Серая кнопка вверх для uCoz с синей стрелкой:

Для установки этой кнопки нужно зайти в Панель управления -> Дизайн -> Управление дизайном (шаблоны) -> Нижняя часть сайта и вставить этот скрипт:

Код
<script src="http://uguide.ru/templates/uguide_ru.js" type="text/javascript"></script>

Способ 2. Серая кнопка Вверх с зеленой стрелкой:

Для установки так же вставляем данный скрипт в Нижнюю часть сайта:

Код
<script src="http://uguide.ru/templates/uguide_ru2.js" type="text/javascript"></script>

Все, теперь когда вы долистаете страницу сайта в самый низ справа появится данная кнопка, которая поднимет вас в самый верх.

 
Способ 3. Серая кнопка "Наверх":


Вставляем данный код в Нижнюю часть сайта:

Код
<a href="javascript://" onclick="$('body').scrollTo(top:$('body').offset().top, left:0, 1500);return false;">  
<div style="position:fixed; opacity:0.8; bottom:0px; right:0px;" id="fImgtotop">
<img title="Вверх" src="http://uguide.ru/templates/up4.png" border="0"></div></a>

Следующий вариант чуть посложнее…
 

Способ 4. Серебристая кнопка с красной стрелкой и надписью "Вверх":

При скроллинге страницы вниз кнопка появляется в правом нижнем углу.
Что бы установить эту кнопку нужно в ПУ -> Дизайн -> Управление дизайном (шаблоны) -> Нижняя часть сайта вставить код:

Код
<a href="#" id="toTop">Вверх <img src="http://uguide.ru/templates/up3.gif" border="0" align="absmiddle" /></a>  
<script src="http://uguide.ru/templates/uguide_ru3.js" type="text/javascript"></script>  
<script type="text/javascript">  
$(function()   
$("#toTop").scrollToTop();  
);  
</script>
После этого в "Таблицу стилей (css)" добавить такой код:
Код
#toTop   
  width: 100px;  
  background: #f1f1f1;  
  border: 1px solid #cccccc;  
  text-align: center;  
  padding: 5px;  
  position: fixed;  
  bottom: 10px;  
  right: 10px;  
  cursor: pointer;  
  color: #666666;  
  text-decoration: none;


Сохраняемся и на этом установка закончена.

И, последний вариант кнопки Вверх для uCoz.
 

Способ 5. Синяя кнопка Вверх:

Немного похожа на кнопку как ВКонтакте, но несколько отличается. По умолчанию кнопка "Вверх" выводится с левой стороны в верхнем углу и кликабельна по всей высоте сайта. По желанию ее можно переместить вправо.
Для установки нужно скопировать этот код в нижнюю часть сайта:

Код
<script type="text/javascript" src="http://uguide.ru/templates/uguide_ru4.js"></script>  
<div class="upTop blue">  
  <div class="upTopZone"><p>Вверх</p></div>  
  <div class="upTopButton"></div>  
</div>

Теперь, добавляем в Таблицу стилей (css) код:

Код
.upTop   
  display:none;  
  width:100px;  
  height:100%;  
  position:fixed;  
  left:0px;  
  top:0px;  
  z-index:100;  
  
.upTopButton   
  background:#777777 url(http://uguide.ru/templates/goup.png) no-repeat;  
  width:27px;  
  height:27px;  
  position:fixed;  
  top:10px;  
  left:10px;  
  cursor:pointer;  
  
.upTopZone   
  display:none;  
  background:url(http://uguide.ru/templates/upbg.png) repeat;  
  width:100px;  
  height:100%;  
  cursor:pointer;  
  
.upTopZone p   
  background:#777777;  
  font-size:12px;  
  width:63px;  
  height:27px;  
  margin:0;  
  position:fixed;  
  top:10px;  
  left:37px;  
  color:#fff;  
  font-family:"tahoma", "verdana", "arial";  
  line-height:25px;  
  text-align:center;  
  text-shadow:1px 1px 1px #000000;  
  
@media screen and (max-width:1024px)   
  .upTopZone   
  display:none !important;  
    
} .blue .upTopButton, .blue .upTopZone p   
  background-color:#3fa3e1;  
  
.green .upTopButton, .green .upTopZone p   
  background-color:#60bf3a;  
  
.red .upTopButton, .red .upTopZone p   
  background-color:#ca2929;  
  
.orange .upTopButton, .orange .upTopZone p   
  background-color:#ef990b;  
  
.purple .upTopButton, .purple .upTopZone p   
  background-color:#b053a0;  
  
.grey .upTopButton, .grey .upTopZone p   
  background-color:#777777;  
Для изменения цвета кнопки нужно заменить класс 
  • blue — голубой 
  • green — зеленый 
  • red — красный 
  • orange — оранжевый 
  • purple — пурпурный 
  • grey — серый

На этом все. Вот такими нехитрыми манипуляциями вы сможете добавить кнопку "Вверх" для своего сайта. По умолчанию на uCoz она не установлена, но в некоторых случаях может быть даже очень полезной. Если будут какие-то вопросы по установке — задавайте через каменты или социальные сети

  • Обновлено:
    2013-04-30
  • Автор:
  • Оцените статью:
    9.6/10 из 81

Источник: uguide.ru

Похожие посты