ПолезностиКнопка "Наверх" (три варианта) для Instantcms

Главные вкладки

кнопка наверх

ПЕРВЫЙ ВАРИАНТ КНОПКИ "НАВЕРХ"

 

Начнем с самого простого варианта - без тормозящих открытие страницы скриптов и разного типа рисункафф. 

Открываем файл template вашего шаблона и сразу же после тега <body> вставляем:

 

<a name="Начало"></a>

 

В этом же файле, сразу же после окончания контента, это где-то 260 какая-то строка вставляем:

 

<center><a id="on_top" href="#Начало">Наверх страницы</a></center>

 

Теперь нам нужно прописать стиль для будущей кнопки "Наверх". Открываем файл style.css вашей темы и в самый низ вставляем:

 

Код PHP:

a#on_top{
    display: block;
    width:220px;
    height:30px;
    font-size: 15px;
    line-height: 30px;
    text-indent: 20px;
    text-decoration: none;
    margin: 10px;
    color: #fff;
    background: #1f637c; 
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-khtml-border-radius: 10px;
}
 
a#on_top:hover{
    text-decoration: underline;
}

 

После таких нехитрых действий у нас внизу появляется такая симпотная кнопочка

 

naverh_knopka.jpg

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

ВТОРОЙ ВАРИАНТ КНОПКИ "НАВЕРХ"

 

Открываем файл template вашего шаблона и после открывающего тега <head> вставляем:

 

<link href="/up/up.css" rel="stylesheet" type="text/css" />

 

В этом же файле в блок контента (если вставите выше - шаблон просто закроет кнопку) вставляем:

 

Код PHP:

<a href="#" id="toTop">Наверх <img rel="lightbox" src="/up/up.gif" border="0" align="absmiddle" /></a> 
<script rel="lightbox" src="/up/up.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(function() { 
$("#toTop").scrollToTop(); 
}); 
</script>

 

Скачанный архив up.zip распаковываем в корень сайта и получаем вот такой результат:

kn.jpg

 

 

 

 

 

 

 

 

 

ТРЕТИЙ ВАРИАНТ КНОПКИ "НАВЕРХ"

На этот раз в виде ракеты. Скачиваем архив knopka-vverh-v-vide-rakety-dlja-saita-ili-bloga-rar.rar.

Распаковываем его в папку с вашим шаблоном.

Открываем  templates/ваш шаблон/template.php. Перед закрывающим тэгом перед </body> вставляем:

Код PHP:

<script type="text/javascript" rel="lightbox" src="/templates/шаблон/js/jquery.min_raketa.js"></script>

<script type="text/javascript" rel="lightbox" src="/templates/шаблон/js/MrScrollUp_raketa.js"></script>

<link rel="stylesheet" type="text/css" href="/templates/шаблон/css/MrScrollUp_raketa.css" />

<div id="MrScrollUp" style="display:none;"><div class="MrScrollUp1"></div><div class="MrScrollUp2"></div></div>

<script>

sdsdsdsdsd.png

 

Не забудьте поменять /шаблон/ на название вашего шаблона!!!

 

 

Разработчик советует после установки данного хака проверить работу js. 

Кнопка с некоторыми скриптами не уживается)))

Приятных всем полетов!!!

 

 

Категория: 
Хаки для Instantscms