Главная » Функционал » Нестандартные решения » Как установить кнопку «Вверх» на uCoz

Как установить кнопку «Вверх» на uCoz

21.01.2012 в 21:26
Автор: Antonij   




Вот такая кнопочка (вы можете видеть её в правом нижнем углу моего сайта, когда прокрутите страницу вниз), я считаю, должна быть на каждом сайте! Ещё бы, она так облегчает просмотр длинных страниц – не надо крутить страницу опять вверх, чтобы вернуться к меню, а нажал на кнопочку и – ты уже в начале страницы! К тому же это так красиво – страница красиво и плавно проматывается вверх, приятно смотреть (кроме Оперы – в ней просто моментально возвращается наверх).

Итак, для установки сначала скачайте вот этот архив (1,70 Кб). На своём сайте открываем Файловый менеджер, в нём создаём папку, называем, например «top»,



Открываем эту папку и в неё заливаем файлы из распакованного архива.



Далее в Панели Управления идём в Управление дизайном и кликаем в Нижнюю часть сайта.



Здесь в самый верх вставляем вот этот код:
Code
<a href="#" id="toTop">Вверх <img src="/top/to_top.gif" border="0" align="absmiddle" /></a>  <script src="/top/jquery.scroll.pack.js" type="text/javascript"></script>  <script type="text/javascript">  $(function() {  $("#toTop").scrollToTop();  });  </script>

Далее идём в Управление дизайном сайта, и затем в Таблицу стилей (CSS).



Здесь в самый верх вставляем вот этот код:
Code
/* === jQ TOP === */  #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;  }  /* =============== */

Всё, открывайте свой сайт и любуйтесь кнопочкой! ;-)

Вверх, кнопка вверх, top button


Прикреплённый файл: 158_vverh.rar (1.7Kb)

Рейтинг: 41  (помогла ли Вам эта инструкция: да / нет)          Просмотров: 9789          Комментариев: 13

Похожие инструкции

10.02.2016 в 18:31      +1  

<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="адрес вашей кнопки" border="0"></div></a>
вставляется в нижнюю часть сайта в шаблонах.
посмотреть работу можно здесь http://darkicyheart.ucoz.ru
19.04.2016 в 00:34      0  

Большое спасибо  smile
02.11.2015 в 08:02      0  

Как всё сложно, у меня проще.
http://newjs.my1.ru/load/js_skripty/js_skripty/vechno_vidimaja_knopka_na_verkh/4-1-0-19
01.08.2014 в 10:00      0  

Появился текст Вверх и какаято пустая клетка.И все это в нижнем левом угле. как сделать так чтоб иконка появилась С права по центру сайта?
18.11.2015 в 17:12      +2  

Попробуйте такой вариант. Ничего лишнего, вверх-вниз, за то просто как 2*2. Вставьте в футер в самый низ и кнопки сами встанут как надо.
<script type="text/javascript"> 
jQuery(function(){ 
 $("#Go_Top").hide().removeAttr("href"); 
 if ($(window).scrollTop()>="250") $("#Go_Top").fadeIn("slow") 
 $(window).scroll(function(){ 
 if ($(window).scrollTop()<="250") $("#Go_Top").fadeOut("slow") 
 else $("#Go_Top").fadeIn("slow") 
 }); 

 $("#Go_Bottom").hide().removeAttr("href"); 
 if ($(window).scrollTop()<=$(document).height()-"999") $("#Go_Bottom").fadeIn("slow") 
 $(window).scroll(function(){ 
 if ($(window).scrollTop()>=$(document).height()-"999") $("#Go_Bottom").fadeOut("slow") 
 else $("#Go_Bottom").fadeIn("slow") 
 }); 

 $("#Go_Top").click(function(){ 
 $("html, body").animate({scrollTop:0},"slow") 
 }) 
 $("#Go_Bottom").click(function(){ 
 $("html, body").animate({scrollTop:$(document).height()},"slow") 
 }) 
}); 
</script> 

<a style='position: fixed; bottom: 300px; right: 1px; cursor:pointer; display:none;' 
href='#' id='Go_Top'> 
 <img src="http://алтайэнергомаш.рф/top_button/icon_up.png" title="Вверх"> 
</a> 
<a style='position: fixed; bottom: 250px; right: 1px; cursor:pointer; display:none;' 
href='#' id='Go_Bottom'> 
 <img src="http://алтайэнергомаш.рф/top_button/icon-down.png" title="Вниз"> 
</a>
22.12.2015 в 21:57      +1  

Спасибо. Сначала установила стрелку вверх, затем поставила ваш вариант и остановилась именно на нем. Страшно далека от программирования, объясните зачем здесь адрес алтайэнергомаш? wacko
23.12.2015 в 05:36      0  

Привет радуга smile . Я же не знаю какой адрес будет у вас, скопируйте картинки стрелок, закиньте в папку с картинками на сайте, и вместо этого адреса пропишите свой, если и это сложно, то работать будет и так, код програмный и индексации не подлежит. Можете вставить свои свои иконки кнопок кстати, если эти не подходят.
31.07.2014 в 09:59      0  

Кнопка появляется только когда доходишь до низа страницы или постоянно? Если постоянно, есть скрипт в котором кнопка появляется только когда доходишь до низа.
17.08.2013 в 08:41      0  

Большое спасибо за подсказку
14.11.2012 в 18:27      0  

Здравствуйте, все работает, только вот рисунок кнопки отсутствует.
Помогите, что я не так сделал ?
Вот сайт: http://avtokrivbass.com.ua/
24.02.2014 в 16:20      0  

Иконку можете в сети найти, их много там
26.01.2012 в 22:28      +1  

скрпит, файл и описание найденный в интернете.
26.01.2012 в 22:19      0  

Сайт для мануалов, а не установи кнопок уже "заезженных" типов