Главное меню

Как сделать кнопку "Вверх" для сайта на 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 из 84

avatar

Комментариев:34

Аватар quirquinchos
34 uid Наталья Набатникова • 10:02, 2016-03-20
теперь у меня пятая кнопка можете посмотреть сами , кто не верит на моем сайте день по испански
нет аватара
33 uid Людмила Иванникова • 09:37, 2016-03-20
Вот спасибо за стрелку. Супер! Без лишних телодвижений,все просто. Спасибо админ!
Аватар poparim
32 uid Николай • 05:15, 2016-02-05
Всем добра. Если у Вас после установки не работает кнопка, попробуйте: в ПУ -> Общие настройки поменять версию библиотеки jQuery.
Аватар JOCONDA
31 vk Нина Ткаченко • 22:34, 2016-02-04
Спасибо за кнопочку ВВерх!Использовала второй вариант-зеленую стрелочку.Вот еще бы такую же сделать "Вниз"...Но я не знаю как...Не поможете с этим?
Аватар sosnovka_31
30 uid Анастасия Замедлина • 10:34, 2016-01-31
Спасибо большое!!! Всё так просто! И всё прекрасно работает! Спасибо!!!
Аватар z1M
29 uid z1M • 15:10, 2016-01-17
Как сделать с другой с правой стороны?
Аватар latnatbron
28 gp Наташа Латышева • 07:42, 2016-01-07
Спасибо! Первый способ работает и ничего лишнего!
нет аватара
27 uid Дмитрий Клещёв • 11:36, 2016-01-06
Молодец, доходчиво и понятно. Еще раз спасибо!
нет аватара
26 ya Юлия Захарова • 11:14, 2016-01-05
Спасибо! Всё очень доступно даже для начинающих!
Аватар MaxxBr
Хороший пост0Плохой пост
25 vk Максим • 16:29, 2015-11-18
Также советую попробовать эти кнопочки, мне очень понравились, забрал себе. Вверх - вниз и ничего лишнего.

Дизайн - Управление дизайном - Нижняя часть сайта - Вставляем в самый низ, наслаждаемся. Ничего лишнего, всё просто!
Аватар poparim
24 uid Николай • 04:46, 2015-08-09
Спасибо.
Аватар quirquinchos
23 fb Наталья Набатникова • 09:12, 2015-07-14
попробовала и первую и четвертую и пятую , все работают,  остановилась на четвертой, спасибо,
и это , что я не разбираюсь в программирование, класс!!
Аватар Skyer
22 uid Кирилл • 00:08, 2015-03-19
Четвертый точно также, внизу посередине высвечивается надпись вверх , да она активная, но стиля вообще нет... второй нормально заработал.
Аватар Skyer
21 uid Кирилл • 23:56, 2015-03-18
Способ 5 никак не хочет работать...(
Аватар Perseus
20 uid Олег Колчанов • 03:19, 2015-03-17
Все отлично работает, только вот незадача: кнопка появляется исключительно на главной, а хотелось бы чтобы она присутствовала и на страницах разделов и категорий. Подскажите, что нужно сделать, чтобы получить желаемое?
Использую первый вариант (серая с синей стрелкой), код установлен в самый низ футера.
нет аватара
19 uid Igor Filonov • 07:27, 2015-03-05
Как сделать чтобы кнопка располагалась ближе к центру? 2 способ.
нет аватара
18 uid Максим Ванин • 16:18, 2015-02-06
Классно, работает, не подскажите как сделать что бы кнопка была справа внизу. Использовал 5 способ. Заранее спасибо!
нет аватара
17 uid Наталя Галазюк • 11:11, 2015-01-22
Большое спасибо. Все работает.
нет аватара
16 uid Анатолий Анипченко • 14:38, 2015-01-13
Спасибо большое! Ваши статьи очень помогают! Все написано доступным языком!
Хотелось бы почитать материал по установке тегов h1, h2 и h3. Заранее спасибо!
Аватар kupina
15 uid Наталья • 06:56, 2015-01-03
Поставила кнопку на два своих сайта. Всё работает. Большое спасибо!
Аватар Андрей6306
14 uid Андрей • 21:10, 2014-11-25
Большое спасибо, все очень понятно!  respect
нет аватара
13 uid Natalya Shestuhina • 22:06, 2014-11-01
Большое спасибо, все очень просто оказалось!
Аватар Grabber
12 uid Vladimir • 03:12, 2014-10-13
В способе 5 в стиле(.upTopZone p) надо дописать(padding:0;)
иначе кнопка может быть широкой
нет аватара
10 uid Ята Аталия • 02:36, 2014-09-26
hands Спасибо, очень помогла статья.
нет аватара
9 uid Taurus • 20:32, 2014-09-13
Печально видеть, что вместо того чтобы исправлять свои ошибки, авторы скрипта просто трут неугодные комментарии. Чтож, я напишу снова. Всякий желающий может зайти на мой сайт, где установлен этот скрипт, и посмотреть, что же за текст выводится при наведении курсора на стрелку. Например  stroni4ka.ru/forum  Вместо логичной надписи "Наверх" мы видим там надпись "Ia aa?o". Сама-то стрелка, впрочем, работает, но давайте таки назовём вещи своими именами - скрипт кривой.
Аватар uGuide
Хороший пост0Плохой пост
11 uid Дмитрий Луценко • 12:57, 2014-10-07
Исправлено
нет аватара
8 uid Александр Ксенофонтов • 18:13, 2014-09-02
Спасибо:)
нет аватара
7 uid Photographer Pavel • 14:54, 2014-08-31
Спасибо ! Очень помогли !
нет аватара
6 uid babos • 01:24, 2014-08-16
Работает. Спасибо, все понятно и доступно.
А как переместить на правую сторону?
Аватар
5 vk Мария Тимофеева • 19:52, 2014-07-28
Спасибо. Человеческим языком и наглядно. flower
нет аватара
4 олег • 19:03, 2013-09-17
Спасибо за кнопочку!!!!!!!!
нет аватара
3 Дарья Молчанова • 19:10, 2013-09-16
Очень прикольно получилась спасибки
нет аватара
2 Chaika • 19:09, 2013-09-16
Поставил, работает. Спасибо
нет аватара
1 Владимир Пономаренко • 19:09, 2013-09-16
Спасибо за статейку, полезный сайт.
Добавить комментарий