Первое решение
вверх - вниз, добавляет две стрелки:
добавляем в шаб после <body>:
<div class="go-up" title="Вверх" id='ToTop'>⇧</div> <div class="go-down" title="Вниз" id='OnBottom'>⇩</div>
в сайт/templates/_default_/css/styles.css:
.go-up,
.go-down {
display:none;
position: fixed; /*позиционируем*/
right: 5px; /*указываем положение, если слева - left*/
z-index: 9999; /*показываем поверх все элементов на странице*/
background: #4F4F4F;
border: 2px solid #ccc; /*толщина, стиль, цвет рамки*/
box-shadow: 0 10px 0.3em -0.1em rgba(0,0,6,0.5); /*тень*/
border-radius: 10px;
cursor: pointer;
color: #fff; /*цвет стрелок*/
text-align: center; /*выравнивание*/
font-size: 42px; /*размер стралок*/
text-shadow: 0 1px 2px #000, 0 0 10px #E0F1FF;
opacity: .7; /*прозрачность*/
padding: 0 3px 5px 3px; /*отступы внутри*/
margin-bottom: 5px; /*отступ снизу (можно не указывать)*/
width: 48px; /*ширина кнопки*/
height: 48px; /*высота кнопки*/
}
.go-up {
bottom: 70px; /*положение от низа окна браузера*/
}
.go-down {
bottom: 10px;
}
/*стили при наведении курсора*/
.go-down:hover,
.go-up:hover {
opacity: 1;
}в сайт/templates/_default_/template.php
до </head> вставить:
<script>
$(function(){
if ($(window).scrollTop()>="250") $("#ToTop").fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()<="250") $("#ToTop").fadeOut("slow")
else $("#ToTop").fadeIn("slow")
});
if ($(window).scrollTop()<=$(document).height()-"999") $("#OnBottom").fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()>=$(document).height()-"999") $("#OnBottom").fadeOut("slow")
else $("#OnBottom").fadeIn("slow")
});
$("#ToTop").click(function(){$("html,body").animate({scrollTop:0},"slow")})
$("#OnBottom").click(function(){$("html,body").animate({scrollTop:$(document).height()},"slow")})
});
</script>Вариант второй
Все файлы из папки js добавить в /templates/_default_/js/
Содержимое template.txt скопировать и добавить в /templates/_default_/template.php в самый низ перед тэгом </body>
Содержимое styles.txt скопировать и добавить в /templates/_default_/css/styles.css
____________________________________________________________________________________________________________
Вывод кнопки может быть в любом углу, для этого закомментируйте и раскомментируйте нужные строки в styles
Скачать:
Вариант третий
Кнопка ввиде взлетающей ракеты неплохое украшение и доп юзаби́лити к сайту
Идем в templates/шаблон/template.php
перед тегом </body> ставим код, шаблон заменяем на название вашего шаблона
<script type="text/javascript" src="/templates/шаблон/js/jquery.min_raketa.js"></script> <script type="text/javascript" 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>
Содержимое архива раскладываем по папкам
Скачать:
Кнопка в верх вниз для instantcms1.10.3,4 в виде модуля и виджет для 2
Скачать модуль верх вниз для instantcms1.10.3-1.10.4
Скачать виджет верх вниз для instantcms 2
Теги: instantcms,хаки,капча
